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

    <span class="error" ng-show="warnForm.zd.$error.required">

        Required!

    </span>

    <span class="error" ng-show="warnForm.zd.$error.pattern">

        Single word only!

    </span>

    <span class="error" ng-show="warnForm.zd.$error.minlength">

        最小长度为4

    </span>

    <span class="error" ng-show="warnForm.zd.$error.maxlength">

        最大长度为10

    </span>

</div>

 

posted @ 2017-09-16 13:18  Sun~_~  阅读(174)  评论(0编辑  收藏  举报