鏈€绠€鍗曠殑浣跨敤

<script src="//qidian.gtimg.com/lulu/theme/modern/js/plugin/sea.js"></script>
<script>
seajs.config({
    'base': 'http://qidian.gtimg.com/lulu/theme/modern/js'
}).use(['common/ui/Validate'], function(Validate) {
    new Validate($('#form'), callback, options);
});

鍩轰簬HTML5鐨勮〃鍗曢獙璇?/h4>

鈶? 鍩烘湰璇存槑

鍩轰簬HTML5瑙勮寖鐨勮〃鍗曢獙璇佷氦浜掔粍浠躲€備緷璧朎rrorTip缁勪欢銆?/p>

  • 鍐呯疆type绫诲瀷鍖呮嫭锛?code>email, tel, url, zipcode, number, date, hour, minute, time, date-range. 鍦ㄩ珮鐗堟湰IE娴忚鍣ㄧ殑鍚戜笅鍏煎妯″紡涓嬶紝浼氳嚜鍔ㄥ皢涓€浜泃ype鐩存帴text鍖栵紝杩欏湪鍘熺敓娴忚鍣ㄤ笅鏄病鏈夐棶棰樼殑銆傜湡瀹炵敤鎴峰満鏅笉浼氬瓨鍦ㄦ闂锛屽鏋滃ぇ瀹跺疄鍦ㄦ嫍涓嶈繃娴嬭瘯鍚屽锛屽彲浠ュ湪type绫诲瀷鍚庨潰鍔犱釜绌烘牸锛屼緥濡?code>type='email '. 杩欎簺绫诲瀷杈撳叆妗嗛粯璁ゅ唴缃鍒欒〃杈惧紡銆?/li>
  • 鑷畾涔夋鍒欒〃杈惧紡锛屼娇鐢ㄥ師鐢烪TML5灞炴€?code>pattern. 渚嬪锛?code>pattern="^\d{16}$".
  • 鑼冨洿瓒呭嚭锛屽鏁板€艰緭鍏ワ紝range鏁板€艰寖鍥撮€夋嫨锛屼互鍙婃棩鏈熷拰鏃堕棿鐨勮捣姝㈤檺鍒讹紝浣跨敤鍘熺敓min, max, step灞炴€с€?/li>
  • 鍐呭闀垮害闄愬埗锛屼娇鐢ㄥ師鐢?code>maxlength, 浠ュ強minlength銆傛湰缁勪欢浼氳嚜鍔ㄩ€夋嫨瓒呭嚭閮ㄥ垎鐨勬枃瀛椼€?/li>
  • 鍐呯疆璁℃暟鍜岃鏁伴獙璇佸姛鑳斤紝鍙浣跨敤UI缁勪欢閫氱敤鐨凥TML鍜岀被鍚嶇粨鏋?鍙弬鑰冩枃鏈鍜屾枃鏈煙闈欐€乁I缁勪欢鐩稿叧鏂囨。)銆備腑鑻辨枃璁℃暟瑙勫垯浣跨敤lang灞炴€ф帶鍒躲€傛病鏈?code>lang灞炴€э紝琛ㄧず涓嫳鏂?code>1:1; lang="en"琛ㄧず鍚庨潰鐨勬暟鍊兼槸瀛楃鏁帮紝1涓眽瀛楃瓑浜?涓嫳鏂囧瓧绗? lang="zh"琛ㄧず鍚庨潰鐨勬暟鍊兼槸姹夊瓧鏁帮紝2涓瓧姣嶇瓑浜?涓眽瀛椼€?/li>

楠岃瘉瑙勫垯

榛樿涓嶉獙璇侊紝鐐瑰嚮鈥滄彁浜も€濇寜閽悗寮€鍚嵆鏃堕獙璇侊紝鎵€鏈夋湁璇唴瀹规爣绾紝浣嗘槸鎻愮ずtips鍙細鍑虹幇鍦ㄧ涓€涓垨褰撳墠active鎺т欢涓娿€?/p>

濡傛灉涓嶈蛋琛ㄥ崟锛屾垨鑰呬竴寮€濮嬪氨楠岃瘉锛屽悗闈㈠潎鏈変娇鐢ㄧず鎰忋€?/p>

鈶?娴嬭瘯鍏兼紨绀?/h5>
type='email ', required, 澶嶅埗锛歛.b.c@qq.com
type='tel', required, 澶嶅埗锛?3208033621
pattern="^\d{16}$", required, 澶嶅埗锛?000111100001111
type='number ', min='5', max='50', required
required
required
鎮ㄧ殑鎬у埆*
type='url'
required
min="2015-07-10", max="2015-12-01"
min="2015-07-10", max="2015-12-01"
minlength="2", maxlength="20", lang="zh"(2涓瓧姣?涓眽瀛?
minlength="5", maxlength="200"
 
  
// 琛ㄥ崟楠岃瘉
var pwd = $('#pwd'), pwdAgain = $('#pwdAgain');
// 鏂囦欢涓婁紶鎸夐挳鍏冪礌
var btnFile = $('label[for="validateFile"]');
// 闅愯棌input妗?/span>
var hiddenFile = $('#idImgUrl');
// 濡傛灉閫夋嫨鏂囦欢
$('#validateFile').change(function() {
    // 鐩存帴trigger hidden input妗哻hange浜嬩欢
    hiddenFile.val('xxx.png').trigger('change');
});
// 楠岃瘉缁戝畾
new Validate($('#validateForm'), function() {
    new Dialog().alert('鍏ㄩ儴楠岃瘉閫氳繃');
}, {
    validate: [{                                  // 婕旂ず鏇挎崲鍐呯疆鐨勬彁绀?/span>
        id: 'bankAccount',
        prompt: {
            unmatch: '閾惰璐︽埛鍙兘鏄?6浣嶆暟鍊?     // 鍚﹀垯鎻愮ず鏂囧瓧灏辨槸鍐呯疆鐨勨€滃唴瀹规牸寮忎笉绗﹀悎瑕佹眰鈥?/span> 
        }
    }, {
       id: 'pwd',                                 // 婕旂ず娣诲姞鑷畾涔夌殑楠岃瘉
        method: function(el) {
            var valueAgain = pwdAgain.val();
            if (valueAgain && el.val() != valueAgain) {
                return '鍓嶅悗瀵嗙爜涓嶄竴鑷?;
            } else {
                pwdAgain.removeClass('error');
            }
        } 
    }, {
        id: 'pwdAgain',
        method: function(el) {
            if (el.val() != pwd.val()) {
                return '鍓嶅悗瀵嗙爜涓嶄竴鑷?;
            } else {
                pwd.removeClass('error');
            }
        }
    }, {
        id: 'idImgUrl',                           // 楠岃瘉澶村儚蹇呬紶
        method: function(el) {
            // el鎸囧瓨鏀捐韩浠借瘉鍥剧墖鍦板潃鐨刪idden绫诲瀷鐨刬nput妗?            // 闅愯棌鍏冪礌鏃犳硶瀹氫綅锛岃浆绉绘彁绀哄厓绱犵粰鎸夐挳
               濡傛灉鐩爣闈欐€侊紝寤鸿鏀惧湪澶栭潰锛?               濡傛灉鏄姩鎬佺殑锛屽垯蹇呴』鐢ㄥ湪method鏂规硶涓?/span>
            el.data('target', btnFile);
            // 杩斿洖閿欒鎻愮ず
            if (el.val() == '') {
                return '灏氭湭涓婁紶澶村儚';
            }
        }
    }]
});

璇佷欢鐓ч獙璇佺浉鍏矵TML浠ｇ爜锛?/p> 

<label for="validateFile" class="ui_button">涓婁紶鐓х墖</label>
<input type="hidden" id="idImgUrl">

<!-- 鍦ㄩ獙璇乫orm涔嬪鐨勪笂浼犲ご鍍廸orm -->
<!-- 涓婁紶鏂囦欢鐨勮〃鍗?-->
<form><input type="file" id="validateFile" class="clip" accept="image/*"></form>

娉ㄦ剰锛屼笂闈?code>hidden input娌℃湁娣诲姞required灞炴€э紝鎵€浠ュ搴旂殑鏄嚜瀹氫箟鐨刴ethod鏂规硶銆傚鏋滄坊鍔犱簡required灞炴€э紝濡備笅锛?/p> 

<input type="hidden" id="idImgUrl" required>

鍒欒嚜瀹氫箟楠岃瘉鐨勫弬鏁颁笉鑳戒娇鐢?code>method鏂规硶锛岃€岄渶瑕佷娇鐢?code>prompt. 渚嬪锛?/p> 

{                                  // required璁剧疆鏃跺€欑殑澶勭悊
    id: 'idImgUrl',
    prompt: {
        ignore: '灏氭湭涓婁紶澶村儚'     // 濡傛灉鍊兼槸瀛楃涓诧紝鍒欓渶瑕佸湪璇彞澶栭潰杞Щ鎻愮ず鍏冪礌銆傚鏋滄槸鍑芥暟锛屽彲浠ュ啓鍦ㄩ噷闈€?/span> 
    }
}
鈶?璇硶鍜孉PI
new Validate($('form'), callback, options);

浣犳病鏈夌湅閿欙紝1琛屼唬鐮佸氨鍙互婊¤冻鍚勭楠岃瘉闇€姹?/strong>銆傚彟澶栵紝涔熷彲浠ヤ娇鐢ㄥ寘瑁呭櫒鏂规硶锛?/p> 

$(form).validate(callback, options);

鍏朵腑锛?code>callback鏄墍鏈夎〃鍗曢獙璇侀€氳繃鍚庣殑鍥炶皟鏂规硶銆?/p>

options涓哄彲閫夊弬鏁帮紝鍏蜂綋瑙佷笅琛細

鍙傛暟鍚嶇О 鏀寔绫诲瀷 榛樿鍊?/th> 閲婁箟
validate Array [] 鍐呯疆楠岃瘉浠ュ鐨勮嚜瀹氫箟鎻愮ず鍜岄獙璇佹柟娉曘€備负瀵硅薄鏁扮粍闆嗐€傚[{}, {}], 鍏朵腑锛屾瘡涓璞℃牸寮忓涓嬶細 
id: '',                 // 鍏冪礌鐨刬d, 蹇呴』
prompt: {               // 鐢ㄦ潵鏇挎崲鍐呯疆鐨勬彁绀烘枃瀛楋紝鏀寔Function绫诲瀷锛?                           鍙姩鎬佽繑鍥炴彁绀哄瓧绗︿覆鍐呭
    ignore: '',         // 鍊间负绌烘椂鍊欑殑鎻愮ず鏂囧瓧
    unmatch: '',        // 鏍煎紡涓嶅尮閰嶆椂鐨勬彁绀猴紝鍙傝涓婇潰渚嬪瓙閾惰璐︽埛鎻愮ず
    out: {              // 鍊艰寖鍥磋秴鍑烘椂鐨勬彁绀烘枃瀛?/span>
        min: '',
        max: '',
        step: ''
    },
    overflow: {         // 鍐呭闀垮害瓒呭嚭鏃跺€欑殑鎻愮ず鏂囧瓧
        minlength: '',
        maxlength: ''
    }
},
method: $.noop          // 鍏朵粬鑷畾涔夌殑楠岃瘉锛屼緥濡傛湰渚嬬殑鍓嶅悗瀵嗙爜涓€鑷撮獙璇?                           鍏朵腑涓婁笅鏂噒his鎸囧綋鍓嶅疄渚嬪璞★紝鏀寔涓€涓弬鏁帮紝
                           涓哄綋鍓嶈〃鍗曞厓绱?/span>
                        // 杩斿洖閿欒鎻愮ず鍐呭瀛楃涓诧紝鍏朵粬杩斿洖鍊?鍖呮嫭undefined)
                           閮借涓烘槸楠岃瘉閫氳繃
multiple Boolean true 鎻愪氦鏃跺€欐槸鍏ㄩ儴閿欒楂樹寒锛岃繕鏄粎浠呯涓€涓?/td>
immediate Boolean true 鏄惁鍦ㄨ〃鍗曟彁浜ゅ悗寮€鍚嵆鏃堕獙璇?/td>
labelNew Boolean false 鏄惁浣跨敤鍏宠仈label鍏冪礌涓８闇茬殑鏂囧瓧浣滀负鎻愮ず鍏抽敭瀛楋紝榛樿鍏抽棴
onSuccess Function $.noop 褰撳墠琛ㄥ崟鍏冪礌楠岃瘉閫氳繃鏃跺€欐墽琛岀殑鍥炶皟銆?/td>
onError Function $.noop 褰撳墠琛ㄥ崟鍏冪礌楠岃瘉娌℃湁閫氳繃鐨勬椂鍊欐墽琛岀殑鍥炶皟銆?/td>
鈶?涓€浜涢噸瑕佽鏄?/h5>

  1. 璇蜂娇鐢ㄥ師鐢?code><form>鍏冪礌锛屽唴缃?code>submit绫诲瀷鎸夐挳锛岄粯璁?code>disabled. 闃叉JS杩樻病鏈夊垵濮嬪寲锛岀敤鎴风偣鍑绘寜閽紝瑙﹀彂鍘熷鐨勮〃鍗曟彁浜ゃ€?/p>

    鍙﹀锛岀敱浜庡師鐢熸寜閽湪浣庣増鏈琁E涓嬫湁榛戣壊绾挎浠ュ強灏哄涓嶅ソ鎺у埗锛屽彲浠ヤ娇鐢?code><label>鍏冪礌for灞炴€у拰鎸夐挳鐨?code>id灞炴€ц繘琛屽叧鑱斻€備緥濡傦細

    <input type="submit" id="validateSubmit" disabled class="clip">
<label for="validateSubmit" class="ui_button ui_button_primary">鎻愪氦</label>

  2. 鏀寔鑷畾涔夌殑鏂囧瓧鎻愮ず鍜岄澶栫殑鑷畾涔夐獙璇侊紝灏辨槸浣跨敤validate鍙€夊弬鏁板氨鍙互浜嗭紝鏀寔鐨勫熀鏈弬鏁板彲鍙傝涓婇潰鍏充簬鈥渙ption鍙€夊弬鏁扳€濈殑琛ㄦ牸銆?/p>

    闇€瑕佽繘涓€姝ヨˉ鍏呰鏄庣殑鏄紝鑷畾涔夋彁绀烘枃瀛楋紝鏀寔Function绫诲瀷鍙傛暟锛屽疄鐜板姩鎬佹彁绀烘晥鏋溿€備緥濡?code>unmatch鍙槸鍗曠函鐨勭被浼尖€滀笉鍖归厤鈥濈殑鍚硦鎻愮ず銆備粠鐢ㄦ埛瑙掑害璁诧紝瀛樺湪鎻愮ず缁嗗垎鐨勯渶姹傦紝姝ゆ椂锛屽彲浠ヤ娇鐢‵unction绫诲瀷鍊煎仛杩涗竴姝ョ殑鎻愮ず鍐呭缁嗗垎澶勭悊銆備緥濡備笅闈㈤摼鎺ュ湴鍧€缁嗗垎鎻愮ず婕旂ず浠ｇ爜锛堝彇鑷疄闄呴」鐩級锛?/p> 

    validate: [{
    id: 'some_id',
    prompt: {
        unmatch: function(el) {
            var value = el.val(), arr = value.split('://');
            if (arr.length <= 1 || (arr[0] != 'http' && arr[0] != 'https')) {
                return '蹇呴』浠ttp(s)://寮€濮?;
            }
            return '閾炬帴鍦板潃閿欒';
        }
    }
}]

    姝ｅ鎵€瑙侊紝褰撲娇鐢‵unction绫诲瀷鍙傛暟鏃跺€欙紝鏀寔涓€涓彲閫夊弬鏁帮紝鍜宮ethod鍙傛暟涓€鏍凤紝琛ㄧず褰撳墠楠岃瘉鍏冪礌绌洪棿鐨刯Query鍖呰鍣ㄥ璞°€備笂涓嬫枃this鎸囧綋鍓岲OM鍏冪礌銆?/p>

  3. 鏀寔hidden绫诲瀷鐨勫厓绱犻獙璇侊紝浣嗘槸锛岀敱浜巈rrroTip鎻愮ず鏃犳硶瀹氫綅闅愯棌鍏冪礌锛屽洜姝わ紝璇蜂娇鐢ㄧ被浼间笅闈㈢殑浠ｇ爜杞Щ鏈€缁堢湡姝ｇ殑鎻愮ず鍏冪礌锛?/p> 

    $('input[type="hidden"]').data('target', $(target));
鈶?闈炶〃鍗曞厓绱犵殑楠岃瘉

浠庢垜涓汉鐞嗘兂涓讳箟鐨勮搴﹁锛屾垜甯屾湜鎵€鏈夌殑楠岃瘉鍜屾彁浜よ蛋鍘熺敓鐨?code>form鍏冪礌銆?/p>

浣嗘槸瀹為檯鎯呭喌涓嬶紝鏈夋椂鍊欐彁浜ゆ寜閽氨鏄櫘閫氱殑鍏冪礌鏍囩锛屼緥濡傦紝Dialog寮规鐨勭‘璁ゆ寜閽€傛鏃舵棤娉曡Е鍙戝脊妗嗗唴鐨?code>form鍏冪礌鐨?code>submit浜嬩欢銆?/p>

杩樻湁鐨勬椂鍊欙紝鍘嬫牴灏辨病鏈変娇鐢╢orm鍏冪礌銆?/p>

閬囧埌涓婇潰涓ょ鎯呭喌锛屾垜浠濡備綍鏄ソ锛熶笉瑕佹媴蹇冿紝Validate.js鏀寔鏅€氬厓绱犵殑楠岃瘉澶勭悊銆?/p>

鍙傝€冧笅闈㈢殑渚嬪瓙锛屼竴涓?code>input妗嗗湪鏅€氱殑div涓湁涓櫘閫氱殑a鏍囩鎸夐挳銆?/p> 

<div id="notForm" class="p10 bgwh">
    <span class="ui_input ui_search_input">
        <input type="search" required>
        <a href="javascript:" class="ui_icon_search">鎼滅储</a>
    </span>
    <a href="javascript:" class="ui_button ui_button_primary">鎼滅储</a>
</div>

JS浠ｇ爜濡備笅锛?/p> 

// 闈炶〃鍗曞厓绱犻獙璇?/span>
var noForm = $('#notForm');
var noFormValidate = new Validate(noForm, null, {});
noForm.find('a').click(function() {
    if (noFormValidate.isAllPass()) {
        new Dialog().alert('鏃犺〃鍗曢獙璇侀€氳繃');
    }
});

璺熷師鐢?code>form楠岃瘉鐩稿悓涔嬪鍦ㄤ簬鏀寔鑷畾涔夌殑鎻愮ず鍜岃嚜瀹氫箟鐨勯獙璇佹柟娉曪紝涓€娆″叏灞€楠岃瘉鍚庯紝寮€鍚嵆鏃堕獙璇侊紱涓嶄竴鏍风殑鍦版柟鍦ㄤ簬锛岄獙璇佹垚鍔熺殑鏂规硶(isAllPass鏂规硶)闇€瑕佽嚜宸辫皟鐢紝鍥炶皟涔熸槸闇€瑕佽嚜宸卞鐞嗙殑銆?/p>

鍏抽敭灏辨槸锛?code>楠岃瘉瀹炰緥.isAllPass()鏂规硶銆?/p>

涓婇潰鐨凧S浠ｇ爜瑙ｈ灏辨槸锛?/p>

缁欏厓绱犳敞鍐岄獙璇佹柟娉?浼氶獙璇佹墍鏈夎〃鍗曠被鍨嬪瓙鍏冪礌)锛屽綋鐐瑰嚮鎸夐挳鐨勬椂鍊欙紝濡傛灉鍏ㄩ儴閫氳繃(鍚屾椂鎮勬倓寮€濮嬩簡鍗虫椂楠岃瘉)锛屽垯寮瑰嚭寮规銆?/p>

鈶?鎵╁睍鑷畾涔夌殑楠岃瘉绫诲瀷New

闄や簡鍐呯疆鐨?code>email, tel绛夌被鍨嬶紝Validate杩樻敮鎸佽嚜瀹氫箟鐨勭被鍨嬶紝渚嬪锛屼笅闈㈡墿灞曚簡鐭俊楠岃瘉鐮併€佸骇鏈虹Щ鏈鸿韩浠借瘉鍙风爜楠岃瘉绫诲瀷銆?/p> 

$.validate.reg = $.extend({}, $.validate.reg || {}, {
    code: '^\\d{6}$',
    phone: '^\\d+(?:\\-\\d+)*$',
    id: '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|[Xx])$'
});
$.validate.name = $.extend({}, $.validate.name || {}, {
    code: '鐭俊楠岃瘉鐮?,
    phone: '搴ф満',
    id: '韬唤璇佸彿鐮?
});

浣跨敤鐨勬椂鍊欙紝鎸囧畾type鍊煎氨鍙互锛屼緥濡傦細

搴ф満锛?lt;input type="phone">
鈶?涓€寮€濮嬪氨寮€鍚け鐒﹂獙璇?/h5> 
// 涓€寮€濮嬪氨澶辩劍楠岃瘉
var blurForm = $('#blurForm');
var blurValidate = new Validate(blurForm, function() {
    new Dialog().alert('楠岃瘉閫氳繃');
});
// 娣诲姞澶辩劍楠岃瘉浜嬩欢澶勭悊
blurForm.find(':input').each(function() {
    $(this).blur(function() {
        if (!blurForm.data('immediate')) {
            // 濡傛灉娌℃湁寮€鍚嵆鏃堕獙璇?/span>
            $.validate.focusable = 0;
            blurValidate.isPass($(this));
        }
    });
});