jQuery Walidacja

Import js biblioteki (za pomocą tego samouczka 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>

Zasady domyślne walidacji

Porady domyślne

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 Walidacja zawiera wskazówki o chiński pakiet znajdujący się w pakiecie pobieranie dist / lokalizacja / messages_zh.js, brzmi następująco:

(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} 的数值")
});

}));

Można zlokalizować plik informacyjny dist / lokalizacja / messages_zh.js wprowadzone do strony:

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

stosowanie

1, zasady zatwierdzania napisane sterowanie

<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>

Spróbuj »

2, zasady zatwierdzania napisany kod js

$().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: "请选择两个主题"
    }
});

komunikaty na kontroli, jeśli nie ma żadnych wiadomości, będą wykorzystywać informacje domyślną

<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>

Spróbuj »

Wymagane: prawdziwa wartość jest koniecznością.
Wymagane: "#AA: zaznaczone" jest wyrazem prawdą, trzeba zweryfikować.
Wymagane: function () {} return true, wyraził potrzebę weryfikacji.

Dwa powszechnie stosowane w plecy w postaci trzeba wypełniać czy nie wypełnić elementy.

Wspólne metody i uwagę na kwestie

1, w przeciwnym wypadku zastąpić domyślny ZŁOŻYĆ

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

Sposób używania ajax

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

Można ustawić domyślne wartości sprawdzania poprawności sformułowane w następujący sposób:

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

Jeśli chcesz przesłać formularz, musisz form.submit (użytkowanie), zamiast $ (form) .submit ().

2, debugowanie, weryfikacja jest nie tylko wysłać formularz

Jeśli ten parametr ma wartość true, wówczas formularz nie zostanie złożony, tylko kontrole przeprowadzone, to jest bardzo wygodne podczas debugowania.

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

Jeśli strona ma wiele form chcesz ustawić do debugowania, należy:

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

3, zignoruj: ignorować pewne elementy nie są weryfikowane

ignore: ".ignore"

4. Zmień lokalizację wyświetlany komunikat o błędzie

errorPlacement：Callback

Wskazać lokalizację niesłuszna, domyślnie jest to: error.appendTo (element.parent ()), to jest zła wiadomość tyłu elementu uwierzytelniania.

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

Przykłady

<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>

Spróbuj »

Rola kodu jest: W normalnych okolicznościach jest wyświetlany komunikat o błędzie w <td class = "status"> </ td> czy radio jest wyświetlany w sekcji <td> </ td>, jeśli pole jest wyświetlane w treści tyłu.

Zazwyczaj te trzy jednocześnie atrybuty, aby osiągnąć wyświetlenie wszystkich funkcji błędu w pojemniku, a informacje nie są automatycznie ukrywane.

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

5, zmienić styl wyświetlany komunikat o błędzie

Ustawianie błąd stylu, można zwiększyć wyświetlana jest ikona, system ustalił validation.css, zaprojektowany, aby utrzymać styl dokumentu weryfikacji.

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, każde pole jest weryfikowana poprzez wykonywanie funkcji

 Sukces: String, oddzwaniania 

Aby sprawdzić, czy elementy przez operację po weryfikacji, jeżeli następuje po sznurku, które będą traktowane jako klasy CSS, ale również z funkcji.

success: function (label) {
    // Set & nbsp; jako tekst dla IE
    label.html ( "& nbsp;"). addClass ( "sprawdzone");
    //label.addClass("valid").text("Ok! ")
}

Dodaj "ważna" w celu sprawdzenia elementów opisanych w stylu CSS <style> label.valid {} </ style>.

Sukces: "ważna"

7, modyfikować walidacji wyzwalania

Chociaż Poniżej znajduje się logiczna, ale zalecane, chyba że chcesz się fałszywe, inaczej Zamrożenie dodał.

// Wyczyść postać $ (). Ready (function () {
 var validator = $ ( "# signupForm"). walidacji ({
        submitHandler: function (formularz) {
            alert ( "złożone");   
            form.submit ();
        }    
    });
    $ ( "# Reset"). Click (function () {
        validator.resetForm ();
    });

});

8, asynchroniczny weryfikacja

 zdalnego URL 

Droga do uwierzytelniania przy użyciu ajax przekazany do aktualnej wartości domyślnej do weryfikacji zdalnego adresu, jeśli jest to wymagane do złożenia innych wartości, można użyć opcji danych.

 Pilot: "check-email.php" 

Pilot: {
    url: "check-email.php", // typ Bufor: "post", // tryb transmisji danych Typ danych: "json", // otrzymywać formatu danych dane: {username // dane mają być przekazywane: function ( ) {
            return $ ( "# nazwa użytkownika") val () .;
        }
    }
}

Adres zdalny wyprowadzane tylko "prawda" lub "fałsz", nie może mieć innego wyjścia.

9, dodając niestandardowe walidacji

 addMethod: imię, metodzie wiadomość 

Niestandardowe metody uwierzytelniania

// Postacie dwa bajty jQuery.validator.addMethod ( "byteRangeLength", funkcja (wartość, element, param) {
    Długość var ​​= value.length;
    for (var i = 0; i <value.length; i ++) {
        if (value.charCodeAt (i)> 127) {
            Długość ++;
        }
    }
  powrót this.optional (element) || (długość> = param [0] && długości <= param [1]);   
} $ .validator.format ( "Upewnij się, że wartość wpisana {0} - {1} między bajtów (znaków jeden bajt liczyć 2)"));

// Kod pocztowy weryfikacji jQuery.validator.addMethod ( "isZipCode", function (value, element) {   
    var tel = / ^ [0-9] {6} $ /;
    powrót this.optional (element) || (tel.test (wartość));
} "Proszę podać prawidłowy kod pocztowy");

Uwaga: Aby dodać dodatkowe-methods.js plik lub dodać jquery.validate.js pliku.Zalecenia ogólnie zapisany w pliku Dodatkowym-methods.js.

Uwaga: plik messages_cn.js dodać: isZipCode: "może zawierać tekst, litery, cyfry i znaki podkreślenia."Przed wywołaniem Aby dodać dodatkowy-methods.js odniesieniami do plików.

10, radio i checkbox, wybierz weryfikację

Radio musi wybrać wymaganą reprezentację.

<Input type = "radio" id = "gender_male" value = "m" name = "gender" jest wymagana />
<Input type = "radio" id = wartość "gender_female" = "f" name = "gender" />

checkbox musi wybrać odpowiednią reprezentację.

<Input type = "checkbox" class = "checkbox" id = "zgadzam się" name = "zgadzam się" wymagane />

oznacza minimalną liczbę MINLENGTH wyboru musi być zaznaczone, MaxLength reprezentuje maksymalną liczbę wybranych, rangelength: [2,3] oznacza numer wybranego zakresu.

<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "spam []" wymagane MINLENGTH = "2" />
<Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "phone" name = "spam []" />
<Input type = "checkbox" class = "checkbox" id = wartość "spam_mail" = "poczta" name = "spam []" />

Wybierz żądany pokazujący wybraną wartość nie może być pusta.

<Select id = "dżungli" name = "dżungli" title = "Proszę wybrać coś!" Wymagane>
    <Wartość Option = ""> </ option>
    <Wartość Option = "1"> Buga </ option>
    <Wartość Option = "2"> Baga </ option>
    <Wartość Option = "3"> Oi </ option>
</ Select>

zaznaczyć wybraną liczbę minimalną reprezentację MINLENGTH z (multiple choice of select), MaxLength reprezentuje maksymalną liczbę wybranych, rangelength: [2,3] oznacza numer wybranego przedziału.

<Select id = "owoc" name = "owoc" title = "Wybierz co najmniej dwa owoce" class = "{wymagane: true, MINLENGTH: 2}" stwardnienie = "wielokrotne">
    <Option value = "b"> Banana </ option>
    <Wartość Option = "a"> Apple </ option>
    <Wartość Option = "p"> Peach </ option>
    <Option value = "t"> żółwia </ option>
</ Select>

jQuery.validate Chiński API

Validator

walidacji metoda zwraca obiekt Validator. Obiekt walidator ma wiele sposobów można wykorzystać do uruchomienia procedury kalibracji lub zmienić zawartość postaci, kilka powszechnie stosowane metody są wymienione poniżej.

Wbudowana uwierzytelniania

walidacji () jest opcjonalny

$(".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!") 
		}
})

(Nazwa, metoda, komunikat) Metoda addMethod

Parametry name to nazwa metody add.

Metoda Parametr jest funkcją, która przyjmuje trzy parametry (wartość, element, param).
jest wartością elementu, element jest sam element parametr jest parametrem.

Możemy użyć addMethod dodać wyjątkiem wbudowanej metody walidacji metody uwierzytelniania. Na przykład, istnieje pole jedynie stracić litery zakres wynosi af zapisać w następujący sposób:

$ .validator.addMethod ( "AF", function (value, element, params) {  
	if (value.length> 1) {
		return false;
	}
    if (value> = params [0] && wartość <= params [1]) {
		return true;
	} Else {
		return false;
	}
} "Musi być literą, a af");

Jeśli jest to forma pola id = "username", napisany w przepisach:

Nazwa użytkownika: {
   af: [ "a", "F"]
}

AddMethod Pierwszy parametr to nazwa metody uwierzytelniania, aby dodać, to jest AF.
addMethod trzeci parametr, niestandardowy komunikat o błędzie, sugerując, brzmi: "musi być literą, a AF".
addMethod drugi parametr jest funkcją, to jest ważniejsze, sformułowanie decyzji o użyciu tej metody weryfikacji.

Jeśli tylko jeden parametr, pisać bezpośrednio, takie jak AF: "a", to jest to unikalny parametr, jeśli więcej niż jeden parametr jest zapisywany w [], rozdzielając je przecinkami.

Tryb String meta

$ ( "# MyForm"). Potwierdzić ({

   meta: "zatwierdź"

   submitHandler: function () { 
alert ( "Wysłane")}

})

<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" klasy = "{walidacji: {Wymagane: prawdziwy, email: true}}" />

  <Input type = "submit" 
value = "Wyślij" />

</ Form>

Przykłady Demo

fikcyjne przykłady

• Komunikat o błędzie pojemnika
• niestandardowy komunikat jako element danych
• (Pole drop-down) radio (przyciski radiowe), pole wyboru (przycisk wyboru), a następnie wybierz
• Interaktywny formularz (formularz) i korek (składanie AJAX)
• Niestandardowe metody i wyświetlania wiadomości
• Dynamiczne formularze
• Użyj jQuery UI ThemeRoller niestandardowy formularz styl
• TinyMCE - lekka przeglądarka oparte edytor WYSIWYG
• pole wprowadzania pliku
• jQuery mobilnych form uwierzytelniania

Przykłady świecie rzeczywistym

• Formularz rejestracyjny na mleko
• Marketo formularz rejestracyjny
• Sprzedaż Mieszkań Forma panel składany
• Zdalne CAPTCHA (PIN) weryfikację

Przykłady Pobierz

Pobierz oficjalnych wystąpień