jQuery Validate

Import js Bibliothek (mit diesem Tutorial CDN)

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

Die Standard-Validierungsregeln

Standard-Tipps

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date ( ISO ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	maxlength: $.validator.format( "Please enter no more than {0} characters." ),
	minlength: $.validator.format( "Please enter at least {0} characters." ),
	rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
	range: $.validator.format( "Please enter a value between {0} and {1}." ),
	max: $.validator.format( "Please enter a value less than or equal to {0}." ),
	min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate gibt Tipps chinesischen Informationspaket, in dem Download-Paket dist / Lokalisierung / messages_zh.js, lautet wie folgt:

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhongwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	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} 的数值")
});

}));

Sie können die Informationsdatei dist / Lokalisierung / messages_zh.js auf die Seite eingeführt lokalisieren:

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

Verwendung

1, die Validierungsregeln geschrieben Kontrolle

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

Versuchen »

2, die Validierungsregeln geschrieben js Code

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

Nachrichten mit einer Steuerung, wenn keine Meldung erhalten, werden die Standardinformationen verwenden

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

Versuchen »

erforderlich: true Wert ist ein Muss.
erforderlich: "#AA: checked" ein Ausdruck wahr ist, müssen Sie zu überprüfen.
erforderlich: function () {} return true, äußerte die Notwendigkeit der Kontrolle.

Zwei in den Rücken häufig verwendeten, in Form zu füllen müssen oder nicht Elemente zu füllen.

Gängige Methoden und die Aufmerksamkeit auf Fragen

1, ersetzen Sie andernfalls die Standard SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

Way Ajax zu verwenden

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

Sie können Standardwerte validieren mit folgendem Wortlaut ein:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

Wenn Sie das Formular abschicken möchten, müssen Sie form.submit (), statt $ (Form) .submit () zu verwenden.

2, zu debuggen, die Überprüfung ist nicht nur senden Sie das Formular

Wenn dieser Parameter wahr ist, dann wird das Formular nicht eingereicht, erfolgt nur Kontrollen, es ist sehr bequem, wenn das Debuggen.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

Wenn eine Seite mehrere Formulare muss Debug festlegen möchten, verwenden Sie:

$.validator.setDefaults({
   debug: true
})

3, ignorieren: ignorieren bestimmte Elemente werden nicht überprüft

ignore: ".ignore"

4. Ändern Sie den Speicherort der Fehlermeldung angezeigt

errorPlacement：Callback

Geben Sie den Speicherort für fehl am Platze, der Standard ist: error.appendTo (element.parent ()); das ist die falsche Botschaft, die hinter Authentifizierungselement.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

Beispiele

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

Versuchen »

Die Rolle des Codes ist: Unter normalen Umständen wird die Fehlermeldung in der angezeigten <td class = "Status"> </ td>, wenn das Radio in die angezeigte <td> </ td>, wenn das Kontrollkästchen wird in den Inhalt der angezeigten hinter sich.

Normalerweise werden diese drei Attribute gleichzeitig zu erreichen, Anzeige aller Fehlerfunktionen in einem Behälter, und keine Informationen werden automatisch ausgeblendet.

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5, ändern Sie die Art der Fehlermeldung angezeigt

Einstellungsfehler von Stil, können Sie erhöhen das Symbol angezeigt wird, hat das System eine validation.css gegründet, entwickelt, um die Art der Überprüfung Dokument beizubehalten.

input.error {border: 1px solid red;}
label.error {
  background: url ( "./ Demo / images / unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: # EA5200;
}
label.checked {
  background: url ( "./ Demo / images / checked.gif") no-repeat 0px 0px;
}

6, wird jedes Feld durch Ausführen einer Funktion überprüft

 Erfolg: String, Rückruf 

Um sicherzustellen, dass die Elemente durch den Betrieb nach der Überprüfung, wenn gefolgt von einem String, der als CSS-Klasse behandelt werden, sondern auch mit einer Funktion.

Erfolg: function (Label) {
    // Set & nbsp; als Text für den Internet Explorer
    label.html ( "& nbsp;"). addClass ( "geprüft");
    //label.addClass("valid").text("Ok! ")
}

Add "gültig", um die Elemente zu überprüfen in CSS-Style definiert <style> label.valid {} </ style>.

Erfolg: "gültig"

7 Ändern Sie den Trigger-Validierung

Obwohl die folgenden ein boolean ist, aber empfohlen, wenn Sie auf false wollen, sonst hinzugefügt Einfrieren.

// Die Form $ zurücksetzen (). Ready (function () {
 var Validator = $ ( "# signupForm"). validieren ({
        submitHandler: function (form) {
            alert ( "vorgelegt");   
            form.submit ();
        }    
    });
    $ ( "# Reset"). Klicken Sie auf (function () {
        validator.resetForm ();
    });

});

8, asynchrone Verifikations

 Remote: URL 

Weg mit Ajax zu authentifizieren, auf den aktuellen Standardwert an einen Remote-Adressprüfung vorgelegt, wenn andere Werte einreichen müssen, können Sie die Daten-Option.

 remote: "Check-email.php" 

Fernbedienung: {
    url: "Check-email.php", // Spooler-Typ: "post", datatype // Datenübertragungsmodus: "json", // Datenformat Daten empfangen: {username // Daten übergeben werden: function ( ) {
            return $ ( "# username") val () .;
        }
    }
}

Remote-Adresse nur dann ausgegeben, "wahr" oder "falsch", kann nicht anderen Ausgang.

9, das Hinzufügen von benutzerdefinierten Validierung

 addMethod: Name, Methode Nachricht 

Benutzerdefinierte Authentifizierungsmethoden

// Zeichen zwei Bytes jQuery.validator.addMethod ( "byteRangeLength", Funktion (Wert, Element, param) {
    var length = value.length;
    for (var i = 0; i <value.length; i ++) {
        if (value.charCodeAt (i)> 127) {
            Länge ++;
        }
    }
  Rückkehr this.optional (Element) || (Länge> = param [0] && Länge <= param [1]);   
} $ .validator.format ( "Stellen Sie sicher, dass der Wert in eingegebenen {0} - {1} zwischen Bytes (ein Byte-Zeichen 2 count)"));

// PLZ Überprüfung jQuery.validator.addMethod ( "isZipCode", Funktion (Wert, Element) {   
    var tel = / ^ [0-9] {6} $ /;
    Rückkehr this.optional (Element) || (tel.test (Wert));
} "Bitte füllen Sie das richtige Ihre Postleitzahl");

Hinweis: Um Zusatz methods.js Datei hinzufügen oder jquery.validate.js Datei hinzufügen.Empfehlungen im Allgemeinen geschrieben in Zusatz methods.js Datei.

Hinweis: messages_cn.js Datei hinzufügen: isZipCode: »kann Text, Buchstaben, Zahlen und Unterstrichen."Vor dem Aufruf von Zusatz methods.js Dateiverweise hinzuzufügen.

10, Radio und Checkbox, wählen Sie die Überprüfung

Das Radio muss eine erforderliche Darstellung wählen.

<Input type = "radio" id = "gender_male" value = "m" name = "Geschlecht" erforderlich />
<Input type = "radio" id = "gender_female" value = "f" name = "Geschlecht" />

Checkbox, muss die gewünschte Darstellung wählen.

<Input type = "checkbox" class = "Checkbox" id = "stimme zu" name = "stimme zu" erforderlich />

stellt die minimale Anzahl von minlength Ankreuzfeld muss überprüft werden, maxlength die maximale Anzahl von ausgewählten, rangelength repräsentiert: [2,3] die Nummer des ausgewählten Bereichs.

<Input type = "checkbox" class = "Checkbox" id = "spam_email" value = "E-Mail" name = "Spam []" erforderlich minlength = "2" />
<Input type = "checkbox" class = "Checkbox" id = "spam_phone" value = "Telefon" name = "Spam []" />
<Input type = "checkbox" class = "Checkbox" id = "spam_mail" value = "Mail" name = "Spam []" />

Wählen Sie die gewünschte den gewählten Wert zeigt nicht leer sein.

<Wählen Sie id = "Dschungel" name = "Dschungel" title = "Bitte wählen Sie etwas!" Erforderlich>
    <Option value = ""> </ option>
    <Option value = "1"> Buga </ option>
    <Option value = "2"> Baga </ option>
    <Option value = "3"> Oi </ option>
</ Select>

die gewählte Darstellung minlength Mindestanzahl an (Mehrfachauswahl von select), maxlength stellt die maximale Anzahl von ausgewählten, rangelength: [2,3] die Nummer des gewählten Intervall.

<Wählen Sie id = "Frucht" name = "Frucht" title = "Bitte wählen Sie mindestens zwei Früchte" class = "{required: true, minlength: 2}" multiple = "multiple">
    <Option value = "b"> Banana </ option>
    <Option value = "a"> Apple-</ option>
    <Option value = "p"> Peach </ option>
    <Option value = "t"> Turtle </ option>
</ Select>

jQuery.validate Chinese API

Validator

Validate-Methode ein Validator-Objekt zurückgibt. Validator-Objekt hat viele Methoden verwendet werden, um den Kalibrierungsvorgang auszulösen oder den Inhalt der Form zu ändern, mehrere häufig verwendete Methoden sind unten aufgeführt.

Integrierte Authentifizierung

Validierung () ist optional

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})

addMethod (Name, Verfahren, message) Verfahren

Parameter Name ist der Name des Add-Methode.

Parameter-Methode ist eine Funktion, die drei Parameter (Wert, Element, param) nimmt.
Wert der Wert des Elements, Element ist das Element selbst, param ist der Parameter.

Wir können addMethod verwenden außer dem integrierten Authentifizierungsmethode Validationsmethode hinzuzufügen. nur Zum Beispiel gibt es ein Feld, einen Brief zu verlieren, ist der Bereich af ist, wie folgt geschrieben:

$ .validator.addMethod ( "Af", Funktion (Wert, Element, params) {  
	if (value.length> 1) {
		return false;
	}
    if (value> = params [0] && Wert <= params [1]) {
		return true;
	} Else {
		return false;
	}
}) "Muss ein Brief, und af sein";

Wenn es ein Formularfeld id = "username", in den Regeln geschrieben:

Benutzername: {
   af: [ "a", "f"]
}

AddMethod erste Parameter ist der Name des Authentifizierungsmethode hinzuzufügen, dann af ist.
addMethod dritten Parameter, wird eine Meldung individuelle Fehler, was darauf hindeutet, hier ist: "muss ein Buchstabe sein, und af".
addMethod zweite Parameter ist eine Funktion, das wichtiger ist, auf den Wortlaut der Entscheidung, diese Methode der Verifikation verwenden.

Wenn nur ein Parameter, schreiben direkt wie af: "a", dann ist dies ein eindeutiger Parameter, wenn mehr als ein Parameter in [] geschrieben wird, die durch Kommas getrennt.

Meta-String-Modus

$ ( "# Myform"). Validate ({

   Meta: "validieren",

   submitHandler: function () { 
alert ( "Übermittelt!")}

})

<Script type = "text / javascript" 
src = "js / jquery.metadata.js"> </ script>

<Script type = "text / javascript" 
src = "js / jquery.validate.js"> </ script>

<Form id = "myform">

  <Input type = "text" 
name = "email" class = "{bestätigen: {erforderlich: true, E-Mail: true}}" />

  <Input type = "submit" 
value = "Submit" />

</ Form>

Beispiele Demo

Fiktive Beispiele

• Fehlermeldung Behälter
• Benutzerdefinierte Nachricht als Datenelement
• Radio (Radio - Buttons), Kontrollkästchen (Check - Taste) und wählen Sie (Drop-Down - Box)
• Interaktive Form (Form) und Stecker (AJAX Vorlage)
• Benutzerdefinierte Methoden und Nachrichtenanzeige
• Dynamische Formulare
• Verwenden Sie jQuery UI Themeroller benutzerdefinierte Formular Stil
• TinyMCE - ein leichtes Browser-basierten WYSIWYG - Editor
• Datei - Eingabefeld
• jQuery Mobile Forms Authentication

Beispiele von realen

• Milch Anmeldeformular
• Marketo Anmeldeformular
• Wohnen Verkauf Faltplatte Form
• Remote - CAPTCHA (PIN) Überprüfung

Beispiele herunterladen

Download von offiziellen Instanzen