有哪些常見的驗(yàn)證表單方式（即時(shí)輸入驗(yàn)證，失去焦點(diǎn)驗(yàn)證等），他們各自的優(yōu)缺點(diǎn)是什么？
1.背景介紹
表單驗(yàn)證是javascript中的高級(jí)選項(xiàng)之一。JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證
2.知識(shí)剖析
我們?nèi)蝿?wù)里面的表單驗(yàn)證和用JQ插件的表單驗(yàn)證都可以節(jié)省我們很多的時(shí)間
angular 表單驗(yàn)證
ng-model="data.company.name"
required
name="name"
ng-maxlength="50"
ng-minlength="1"
ng-class="{'error':data123.name.$invalid&&
data123.name.$touched}"
>
公司內(nèi)容不可為空
validate的jq插件
$( "form" ).validate({
debug:true,? //submit? 不會(huì)刷新頁(yè)面? 表單不會(huì)提交只是檢查
rules: {
email: {
email:'true',//可以這樣定義email
required: true,
// remote:''//比較json? 或者url? 可以想后、端發(fā)起請(qǐng)求，
remote:{
url:'remote.json',
type:'post',
data:{
loginTime:function () {
return? +new Date;
}
}
}
},
password: {
// ? ? email:'email格式不對(duì)',
number:'true',
required: true,
// maxlength:10,
// minlength:2,
rangelength:[2,10] , //定義2-10之間的規(guī)則? 定義了這個(gè)上面的 最大最小可以不用
// max:200,
// min:10,
range:[10,200],
digits:'true'//正整數(shù)
},
password2:{
equalTo:'#password'
}
},
messages:{
email:{
required:'必須填寫email',
// remote:'已經(jīng)有這個(gè)email了'
email: "請(qǐng)輸入一個(gè)正確的郵箱",
},
password:{
required:'必須填寫密碼',
//? ? ? ? ? ? ? ? maxlength:'密碼最大為10位',
//? ? ? ? ? ? ? ? minlength:'密碼最小為2位',
rangelength:'用戶名應(yīng)該在2-10位',
range:'請(qǐng)輸入10-200之前的數(shù)字'
},
password2:{
equalTo:'兩次密碼不一致'
},
remote:"已經(jīng)有人用過(guò)了"
},
errorPlacement: function( error, element ) {
error.insertAfter( element.parent() );
},
});
3.常見問題
validate的jq插件可以給disabled嗎
4.解決方案
這個(gè)因?yàn)関alidate有一個(gè)提示語(yǔ)句就不支持這個(gè)了
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
我們不用這些插件效率就會(huì)很低，angular里面也是封裝這自己的插件的
7.參考文獻(xiàn)
參考一：http://javascript.ruanyifeng.com/oop/basic.html">阮一峰
8.更多討論
還有其他的插件也比較好用的嗎？通常是否穩(wěn)定，是否經(jīng)常更新？
鳴謝
感謝大家觀看
BY : 湯金鑫
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。
這里是技能樹.IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)。快來(lái)與我一起學(xué)習(xí)吧 ！http://www.jnshu.com/login/1/96194340
