jQueryフィルタを巧みに使用し、コードの重複を避ける

2222 ワード

jQueryの強さは言うまでもないが、実際のプロジェクトではjQueryに限られることが多い(「...」).val()などはdocumentの代わりに値をとり,値を設定するだけである.比較的複雑なフォームやページでは、適切なツールが使用できないと、効率が大幅に低下し、コードの読み取りが低下します.
プロジェクトのコードは次のとおりです.
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を見に行きましょう.