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>