【北京分院一百七十三期】有哪些常见的验证表单方式（即时输入验证，

有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？

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 : 汤金鑫

PPT链接

angular表单验证_腾讯视频

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！http://www.jnshu.com/login/1/96194340