angularjs的form表单完整验证
2017-01-01 00:00
134 查看
摘要: angular使用指令无缝地增强标准表单元素的功能,例如form、input、select、radio等元素。
(2)$dirty:如果用户与元素/表单产生交互,则返回true;
(3)$valid:当元素/表单内容的校验结果为有效时返回true;
(4)$invalid:当元素/表单内容的校验结果为无效时返回true;
(5)$errorr:提供校验错误的详情信息;
(2)ng-change:用于指定一个表达式,该表达式在元素内容被改变时被计算求值;
(3)ng-minlength:设置一个合法元素所需的最小字符数;
(4)ng-maxlength:设置一个合法元素所需的最大字符数;
(5)ng-pattern:设置一个正则表达式,合法的元素内容必须匹配该正则表达式;
(6)ng-required:通过数据绑定设置required属性值;
(2)ng-change:用于指定一个表达式,该表达式在元素内容被改变时被计算求值;
(3)ng-true-value:指定当元素被勾选中时所绑定的表达式的值;
(4)ng-true-value:指定当元素未被勾选中时所绑定的表达式的值;
(2)ng-selected:用于设置 <select> 列表中的 <option> 元素的 selected 属性;
ng-options表达式的基本形式,形如:“<标签>for<项目>in<数组/对象>”
相当于
注意:select元素的输出里包括了一个option元素,其值是一个问号并且没有任何内容。angularJS在ng-model属性所指的变量值为undefined时会生成这样的元素,可以通过添加一个空值的option来代替默认的option元素,如下所示:
ng-options属性可以用来按照某个属性值将各个选项进行分组,为每个选项值生成一组optgroup元素。
也可以联合使用选项和分组特性,例如:
参考代码:https://github.com/ClickLove/angularJS-test/tree/master
其中AngularJs ng-change事件/指令定义和用法
ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change 指令需要搭配
AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。
ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。
ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。
<input>, <select>, 和 <textarea> 元素支持。
<radio>,<checkbox>
1.监控表单的有效性
(1)$pristine:如果用户没有与元素/表单产生交互,则返回true;(2)$dirty:如果用户与元素/表单产生交互,则返回true;
(3)$valid:当元素/表单内容的校验结果为有效时返回true;
(4)$invalid:当元素/表单内容的校验结果为无效时返回true;
(5)$errorr:提供校验错误的详情信息;
2.使用于input元素的属性
(1)ng-model:双向绑定;(2)ng-change:用于指定一个表达式,该表达式在元素内容被改变时被计算求值;
(3)ng-minlength:设置一个合法元素所需的最小字符数;
(4)ng-maxlength:设置一个合法元素所需的最大字符数;
(5)ng-pattern:设置一个正则表达式,合法的元素内容必须匹配该正则表达式;
(6)ng-required:通过数据绑定设置required属性值;
3.当type属性为checkbox时可适用于input元素的属性
(1)ng-model:双向绑定;(2)ng-change:用于指定一个表达式,该表达式在元素内容被改变时被计算求值;
(3)ng-true-value:指定当元素被勾选中时所绑定的表达式的值;
(4)ng-true-value:指定当元素未被勾选中时所绑定的表达式的值;
4.适用于select元素的属性
(1)ng-options:用于从数组和对象中生成option;(2)ng-selected:用于设置 <select> 列表中的 <option> 元素的 selected 属性;
ng-options表达式的基本形式,形如:“<标签>for<项目>in<数组/对象>”
ng-options="x.id as x.name for x in cities"
相当于
<optiont value="x.id">{{x.name}}</>
注意:select元素的输出里包括了一个option元素,其值是一个问号并且没有任何内容。angularJS在ng-model属性所指的变量值为undefined时会生成这样的元素,可以通过添加一个空值的option来代替默认的option元素,如下所示:
<select id="actionLocation" class="form-control" ng-model="newTodo.location"> <option value="">(click me)</option> <option>Home</option> <option>Office</option> <option>Mall</option> </select>
ng-options属性可以用来按照某个属性值将各个选项进行分组,为每个选项值生成一组optgroup元素。
<select ng-options="item.action group by item.place for item in todos"></select>
也可以联合使用选项和分组特性,例如:
<select ng-options="item.id as item.action group by item.place for item in todos"></select>
参考代码:https://github.com/ClickLove/angularJS-test/tree/master
其中AngularJs ng-change事件/指令定义和用法
ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change 指令需要搭配
ng-model指令使用。
AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。
ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。
ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。
语法
<element ng-change="expression"></element><input>, <select>, 和 <textarea> 元素支持。
<radio>,<checkbox>
参数值
值 | 描述 |
---|---|
expression | 元素值改变时执行表达式。 |
实例说明,radio和checkbox
注:checkbox ng-model总是是true或false,而不是value,其他的ng-model默认都是value 的值相关文章推荐
- angularJS form表单验证
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
- AngularJS 表单(ng-form)验证
- AngularJS 表单(ng-form)验证
- asp.net利用js进行form验证表单
- ASP.NET Form表单验证(转贴)
- 完整的JS表单验证封装类
- form表单加js或ajax验证
- onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交
- jQuery formValidator表单验证插件
- angularjs 表单验证
- angularjs自定义表单验证
- 【AngularJs】---表单验证
- form的onsubmit事件--表单提交前的验证最佳实现方式
- jsp页面form表单交付验证
- PHP jQuery Ajax提交与验证form表单详解
- spring mvc + 表单异步验证插件 Validate.form.js
- AngularJs(七)--指令(三)--标签指令及表单验证
- javaScript做form表单验证及特效
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).