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