angular表单验证

用法

<input type="text"

       ng-model="string"

       [name="string"]

       [required="string"]

       [ng-required="string"]

       [ng-minlength="number"]

       [ng-maxlength="number"]

       [pattern="string"]

       [ng-pattern="string"] //正则验证

       [ng-change="string"] //值改变时触发

       [ng-trim="boolean"]>    //去空格

 

AngularJS在拍卖表单时,会冲表单的状态自动抬高一些CSS类。我们得以应用这些CSS类使用不同的体提示用户表单目前的状态。

CSS类

何时自动添加

ng-pristine

表单没有做过修改时

ng-dirty

表单做过修改时

ng-valid

表单内容合法时

ng-invalid

表单内容非法时

 

 

AngularJS在拍卖表单时,会因表单的状态吧表单及表单下面的元素添加一些特性,这些性反映来了表但目前之状态,我们可当HTML代码中行使这些属于性实时提醒用户,也堪于JS代码中监听这些性以便实时相应。我们可用formName.property和fromName.inputField.property分别走访到表单和表单下面的要素的属性。

属性名

类型

取值

$pristine

布尔型

未修改为true,否则为false。

$dirty

布尔型

修改过为true,否则为false。

$valid

布尔型

验证正确为true,否则为false。

$invalid

布尔型

验证错误为true,否则为true。

实例:

<form novalidate name="warnForm" ng-submit="ok()">

     <p class="zd">

         <input class="pull-right price_Input" type="text" name="zd" ng-model="data.price.zd" ng-pattern="/^(-?\d+|\+?\d+)(\.\d+)?$/" />

         <i class="errorTips" ng-show="warnForm.zd.$invalid">輸入有誤,請輸入有效數字</i>

      </p>

      <p class="zl">

          <input class="pull-right price_Input" type="text" name="zl" ng-model="data.price.zl" ng-pattern="/^([1-9])([0-9]*)$/" />

          <i class="errorTips" ng-show="warnForm.zl.$invalid">輸入有誤,請輸入有效數字</i>

     </p>

      <input type="submit" value="確定" ng-disabled="warnForm.$invalid" class="submit btn  btn-blue" />

</form>

 

当一个input有差不多单错误提示时:

<div role="alert" style='color:red;'>



        Required!





        Single word only!





        最小长度为4





        最大长度为10



</div>

 

相关文章