【北京分院一百七十三期】有哪些常见的验证表单方式（即时输入验证，
有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？
1.背景介绍
表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证
2.知识剖析
我们任务里面的表单验证和用JQ插件的表单验证都可以节省我们很多的时间
angular 表单验证
ng-model="data.company.name"
required
name="name"
ng-maxlength="50"
ng-minlength="1"
ng-class="{'error':data123.name.$invalid&&
data123.name.$touched}"
>
公司内容不可为空
validate的jq插件
$( "form" ).validate({
debug:true, //submit 不会刷新页面 表单不会提交只是检查
rules: {
email: {
email:'true',//可以这样定义email
required: true,
// remote:''//比较json 或者url 可以想后、端发起请求，
remote:{
url:'remote.json',
type:'post',
data:{
loginTime:function () {
return +new Date;
}
}
}
},
password: {
// email:'email格式不对',
number:'true',
required: true,
// maxlength:10,
// minlength:2,
rangelength:[2,10] , //定义2-10之间的规则 定义了这个上面的 最大最小可以不用
// max:200,
// min:10,
range:[10,200],
digits:'true'//正整数
},
password2:{
equalTo:'#password'
}
},
messages:{
email:{
required:'必须填写email',
// remote:'已经有这个email了'
email: "请输入一个正确的邮箱",
},
password:{
required:'必须填写密码',
// maxlength:'密码最大为10位',
// minlength:'密码最小为2位',
rangelength:'用户名应该在2-10位',
range:'请输入10-200之前的数字'
},
password2:{
equalTo:'两次密码不一致'
},
remote:"已经有人用过了"
},
errorPlacement: function( error, element ) {
error.insertAfter( element.parent() );
},
});
3.常见问题
validate的jq插件可以给disabled吗
4.解决方案
这个因为validate有一个提示语句就不支持这个了
5.编码实战
6.扩展思考
我们不用这些插件效率就会很低，angular里面也是封装这自己的插件的
7.参考文献
参考一：http://javascript.ruanyifeng.com/oop/basic.html">阮一峰
8.更多讨论
还有其他的插件也比较好用的吗？通常是否稳定，是否经常更新？
鸣谢
感谢大家观看
BY : 汤金鑫
angular表单验证_腾讯视频
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！http://www.jnshu.com/login/1/96194340
