Javascriptは統一的なフォーム検証を実現する.
7349 ワード
多くの項目において、フォーム検証は不可欠な一環であり、登録、ログイン、アップロードなどがありますが、コードを書くスタイルが違います.一致していなくて優雅なスタイルがないと、便利な配置がなく、コードが混乱しやすくなります.
通常のコードを整理しないと、次のようになります.コードの中でif elseが多すぎて、検証ルールが多いと、長い紙幅を占めて、混乱しているように見えます. コードは繰り返し使用に不利で、直接コピーして変更が大きいです. は結合性が強く、メンテナンスには不利です.増加しても削除しても注意が必要です. 以上のように、フォーム検証のプロセスは簡単で、多重化しやすく、構成しやすいはずである.UIデザイナーの設計スタイルはしばしば単一ではないので、柔軟で、いくつかの異なる場面に適応できるようにしたい.
1,多くの検証シーンが類似しているので、ルールを抽出し、統一管理し、その後の追加や修正にも便利です.
3,検証された論理プロセスは上の構成によって、検証データを関数で取得し、次に規則ライブラリと一致し、エラー情報を返すことができ、全体の検証プロセスを実現することができる.
通常のコードを整理しないと、次のようになります.
if(username == ''){
alert('username ');
return false;
}else if(password == ''){
alert('password ');
return false;
}else if(password.length < 6){
...
return false;
}
...1,多くの検証シーンが類似しているので、ルールを抽出し、統一管理し、その後の追加や修正にも便利です.
//
var rules = {
//
isEmpty:function(value){
return value == '';
},
//
minLength:function(value,length){
return value.length >= length;
},
//
maxLength:function(value,length){
return value.length <= length;
},
//
length:function(value,min,max){
return value.length >= min && value.length <= max;
},
//
isMobile:function(value){
return /(^1[3|5|7|8|9][0-9]{9}$)/.test(value);
}
//
}var v = verify([
{//
value:username,
isEmpty:' ',
},
{//
value:password,
isEmpty:' ',
minLength:' 6 &6',
maxLength:' 12 &12',
},
{//
value:phone,
isEmpty:' ',
isMobile:' '
}
//...
])3,検証された論理プロセスは上の構成によって、検証データを関数で取得し、次に規則ライブラリと一致し、エラー情報を返すことができ、全体の検証プロセスを実現することができる.
// items
function verify(items){
var lens = items.length,
//
arr = [],
//
result = {check:true};
for(var i=0; ivar l = items[i];
val = l.value;
//
if(l.isEmpty && rules.isEmpty(val)){
arr[i] = l.isEmpty;
break;
}
//
if(l.minLength){
var index = l.minLength.lastIndexOf('&'),
msg = l.minLength.substring(0,index),
len = l.minLength.substring(index+1);
if(!rules.minLength(val,len)){
arr[i] = msg;
break;
}
}
//
if(l.maxLength){
var index = l.maxLength.lastIndexOf('&'),
msg = l.maxLength.substring(0,index),
len = l.maxLength.substring(index+1);
if(!rules.maxLength(val,len)){
arr[i] = msg;
break;
}
}
//
if(l.isMobile){
if(!rules.isMobile(val)){
arr[i] = l.isMobile;
break;
}
}
//
}
//
// ，check false,
if(arr.length !== 0){result.check = false;}
result.l = arr.filter(function(v){
return v;
})
return result;
}