标签：pattern 修改 strong log UI data name 验证 isa
用法
<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>
标签：pattern 修改 strong log UI data name 验证 isa
原文地址：http://www.cnblogs.com/SPHmomo/p/7531067.html
