这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 有哪些常见的验证表单方式】
有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？
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.更多讨论
还有其他的插件也比较好用的吗？通常是否稳定，是否经常更新？
鸣谢
感谢大家观看
作者：return_3711
链接：https://www.jianshu.com/p/92a9c0e1d3bb
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地