submit tex 验证 不同 pan red price role
用法
- <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>
angular表单验证
来源: http://www.bubuko.com/infodetail-2310917.html