jquery-validationを変更すると、検証プロンプトがよりきれいになります.

7853 ワード

mvc Json js。 Jquery

jquery-validation検証機能は強力で、ここではあまり言わない.ただ、彼のヒントはそんなにきれいではありません.彼のヒントを変える方法はありませんか.公式にも修正の方法があるようで、読むのがおっくうで、ドキュメントはすべて英語の^^!英語が下手ですね.実はやはりローカライズしたいのですが、原版は英語のヒントで、ついでにヒントも中国語に変えて、よく使われる検証方法を加えて、これからaddMethodは必要ありません.検証方法を豊富にします.あまり言わないで直接修正しましょう.私たちはどのように修正しますか?写真を何枚かください.
これは元のヒントです.
変更後のヒント
原版には3つの状態しかありません.検証する前に、検証エラー、検証に成功しました.
修正後のステータスは、検証前にフォーカスを取得し、検証エラー、検証に成功し、ステータスが保持されます.
まずNotepad++で原版jsを開きますが、なぜNotepad++で開くのですか?Notepad++はメソッドブロックを折りたたむことができ、検索しやすい.
このような機能を実現するには、4つのclass、オリジナルのerrorとvalidが必要であり、2つのnormalとfocusを加えて、それぞれ検証前とフォーカスを取得したclassである.
ここでは199行に次のコードを追加します.

errorClass: "error",
validClass: "valid",
normalClass: "normal",
focusClass: "focus",
signClass: "tip",//   class

ページにはこのように書くだけです(もちろんformに書きます)

次に、フォーカスを取得したイベントonfocusinを順番に修正し、フォーカスを失ったイベントonfocusout、キーを押したイベントonkeyup、名前を見ると見えます.コードは修正したばかりのところに少し下がっています.
変更後

onfocusin: function (element, event) {
	this.lastActive = element;
	//        remove      
	this.addWrapper(this.errorsFor(element))
	.removeClass(this.settings.errorClass)
	.removeClass(this.settings.validClass)
	.removeClass(this.settings.normalClass)
	.addClass(this.settings.focusClass);
	this.addWrapper(this.errorsFor(element)).html(this.errorsFor(element).attr("tip"));
	// hide error label and remove error class on focus if enabled
	if (this.settings.focusCleanup && !this.blockFocusCleanup) {
		if (this.settings.unhighlight) {
			this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass);
		}
		//this.addWrapper(this.errorsFor(element)).hide();
		this.addWrapper(this.errorsFor(element)).removeClass(this.settings.errorClass)
                .removeClass(this.settings.validClass).addClass(this.settings.normalClass);
	}
},
onfocusout: function (element, event) {
    this.addWrapper(this.errorsFor(element))
    .removeClass(this.settings.errorClass)
    .removeClass(this.settings.focusClass)
    .removeClass(this.settings.validClass)
    .addClass(this.settings.normalClass);
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
},
//    
onkeyup: function (element, event) {
    if (event.which === 9 && this.elementValue(element) === '') {
        return;
    } else if (element.name in this.submitted || element === this.lastActive) {
        this.element(element);
    }
},

これらを修正しても、まだ役に立たないですね.次にshowLabelメソッドを変更します

showLabel: function (element, message) {//    
    var label = this.errorsFor(element);
    if (label.length) {
        // refresh error/success class
        label.removeClass(this.settings.validClass)
        .removeClass(this.settings.focusClass)
        .removeClass(this.settings.normalClass)
        .addClass(this.settings.errorClass);
        label.html(message);
        //        generated  ，
        //  class=tip          
        // check if we have a generated label, replace the message then                    
        //if (label.attr("generated")) {
        //    label.html(message);
        //}
    } else {
        // create label
        label = $("")
        .attr({ "for": this.idOrName(element)})
        //.attr({ "for": this.idOrName(element), generated: true })
        .addClass(this.settings.signClass)//          class
        .addClass(this.settings.errorClass)
        .html(message || "");
        if (this.settings.wrapper) {
            // make sure the element is visible, even in IE
            // actually showing the wrapped element is handled elsewhere
            label = label.hide().show().wrap("").parent();
        }
        if (!this.labelContainer.append(label).length) {
            if (this.settings.errorPlacement) {
                this.settings.errorPlacement(label, $(element));
            } else {
                label.insertAfter(element);
            }
        }
    }
    if (!message && this.settings.success) {
        label.text("");
        if (typeof this.settings.success === "string") {
            label.addClass(this.settings.success);
        } else {
            this.settings.success(label, element);
        }
    }
    this.toShow = this.toShow.add(label);
},

hideErrorsメソッドの再修正

hideErrors: function () {
	this.addWrapper(this.toHide).removeClass(this.settings.errorClass)
	.removeClass(this.settings.normalClass)
	.removeClass(this.settings.focusClass)
	.addClass(this.settings.validClass).html("    ");
	//this.addWrapper(this.toHide).hide();
},

エラー・プロンプトのラベルを見つける方法も漏れており、cals=errorに基づいてラベルを検索する必要はありません.
タグラベルのあるlabelを検索するだけでいいです.

errors: function () {
	//var errorClass = this.settings.errorClass.replace(' ', '.');
	//return $(this.settings.errorElement + "." + errorClass, this.errorContext);
	return $(this.settings.errorElement + "."+this.settings.signClass, this.errorContext);
},

次に、初期化時にtip情報を表示することです.labelのtip=「ユーザー名を入力してください」属性が役に立ちます.
ああ、初期化された以上、探してみましょう.
Initメソッドですね.300行程度でInitメソッドを見つけ、以下のコードを付けます.

this.reset();
//            
$.each(this.errors(),function(){
	$(this).html($(this).attr("tip"));
});

簡単なコードです.
この提示部分の修正が終わりましたので、スタイルを直しましょう.

label.error, label.valid, label.focus,label.normal { 
background: url(/content/images/ico_warn.png) no-repeat 4px -197px;
font: 12px/1 verdana, simsun, sans-serif; 
margin: 0; 
padding: 4px 0px 4px 23px;
}

label.normal { background-position: 4px -197px; color: #999999;}
label.error { background-position: 4px -253px;color: #B52726; }
label.valid { background-position: 4px 3px;color: #2666AF; }
label.focus { background-position: 4px -365px; color: #999999; }

次にヒント情報を変更できます

messages: {
    required: "   ",
    remote: "Please fix this field.",
    email: "    ,   ",
    url: "URL      ，   ",
    date: "      ，   ",
    dateISO: "    (ISO)  ，   .",
    number: "     ",
    digits: "     ",
    creditcard: "         ",
    equalTo: "       ",
    accept: "     ",
    mobile:"        ",
    tel:"        ",
    mobileOrTel:"           ",
    qq:"QQ      ",
    chinese:"     ",
    idcard:"         ",
    letter:"     ",
    ip:"IP      ",
    zipcode:"        ",
    maxlength: $.validator.format("     {0}    "),
    minlength: $.validator.format("     {0}    "),
    rangelength: $.validator.format("       {0}   {1}   "),
    range: $.validator.format("      {0}   {1}  "),
    max: $.validator.format("       {0}"),
    min: $.validator.format("       {0}")
},

いくつかの方法を追加します

methods: {.....}

あとはremoteの検証方法を修正して、間違いがあったそうです.このバージョンが変更されたかどうか分かりません.
もう一つは

classRuleSettings: {
	required: { required: true },
	email: { email: true },
	url: { url: true },
	date: { date: true },
	dateISO: { dateISO: true },
	number: { number: true },
	digits: { digits: true },
	creditcard: { creditcard: true }
},

class検証.
つまり

にclass="required"を加えて自動的に検証するのはこれです
修正が完了したら、qq群へようこそ:63181865交流.
予告しますが、修正したらどうやって圧縮しますか?後の文章はまた話しましょう.jQuery公式は圧縮方式を使っているそうですが、楽しみでしょう.
Demoダウンロード

jQueryプラグイン開発の5つの形態の小結

jQueryはローカルストレージ付きメモを実現