jQueryフィルタを巧みに使用し、コードの重複を避ける
2222 ワード
jQueryの強さは言うまでもないが、実際のプロジェクトではjQueryに限られることが多い(「...」).val()などはdocumentの代わりに値をとり,値を設定するだけである.比較的複雑なフォームやページでは、適切なツールが使用できないと、効率が大幅に低下し、コードの読み取りが低下します.
プロジェクトのコードは次のとおりです.
html form(簡略化):
JS検証コード:
JSが画面全体で何画面もこのように見えると、そんなに快適ではなく、デバッグが疲れると信じています.どうやって改善しますか?
まずフォーム項目を調整し、関連するものをまとめる(高集約):
ここでは2つの調整を行いました.1:id属性を削除します.なぜなら、1つの複雑なページで、ページに後続してロードされるdomに同じidの設定が含まれていないことを保証することはできません.(このピット項目にはすでに人が踏んだことがあります).あるフォーム項目を選択してjQuery(「#form_id input[name=instName])のようなセレクタで代用する必要があります.フォーム内でnameが一意であることを保証すればよいという利点があります.2:data-validの属性を増加して、普通data-は头を打って、名前は胜手に起きることができて、后ろのjsと対応することができて、内容はフォームの検证のJSON文字列です.
jsの変更は次のとおりです.
まだ説明が必要なら、jQuery apiを見に行きましょう.
プロジェクトのコードは次のとおりです.
html form(簡略化):
<input style="width:400px" type="text" id="instName" name="instName" value="">
<input type="text" style="width:200px" id="busiLicenseNo" name="busiLicenseNo" value="">
... ( input, select )
JS検証コード:
$(document).ready(function () {
$('#instName').validatebox({
required: true,
validType: ['length[1,64]']
});
$('#busiLicenseNo').validatebox({
required: true,
validType: ['arab_num_char']
});
$('#busiLicenseAvailBegin').validatebox({
required: true,
validType: ['date']
});
... JS
});
JSが画面全体で何画面もこのように見えると、そんなに快適ではなく、デバッグが疲れると信じています.どうやって改善しますか?
まずフォーム項目を調整し、関連するものをまとめる(高集約):
<input style="width:400px" type="text" name="instName" value="" data-valid='{"required":true,"validType":["length[1,64]"]}'>
<input type="text" style="width:200px" name="busiLicenseNo" value="" data-valid='{"required":true,"validType":["length[1,64]"]}'>
... ( input, select )
ここでは2つの調整を行いました.1:id属性を削除します.なぜなら、1つの複雑なページで、ページに後続してロードされるdomに同じidの設定が含まれていないことを保証することはできません.(このピット項目にはすでに人が踏んだことがあります).あるフォーム項目を選択してjQuery(「#form_id input[name=instName])のようなセレクタで代用する必要があります.フォーム内でnameが一意であることを保証すればよいという利点があります.2:data-validの属性を増加して、普通data-は头を打って、名前は胜手に起きることができて、后ろのjsと対応することができて、内容はフォームの検证のJSON文字列です.
jsの変更は次のとおりです.
jQuery("#form_id [data-valid]").each(function(){
var validStr = jQuery(this).attr('data-valid');
if(validStr != ""){
jQuery(this).validatebox(JSON.parse(validStr));
}
});
まだ説明が必要なら、jQuery apiを見に行きましょう.