AngularJSangular表单验证

用法

<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>

 

相关文章