jQuery Valider

La bibliothèque d'importation de (en utilisant ce tutoriel 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>

Les règles de validation par défaut

Conseils par défaut

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 Validation fournit des conseils paquet d'information chinois, situé dans le package de téléchargement dist / localisation / messages_zh.js, se lit comme suit:

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

}));

Vous pouvez localiser les fichiers d'information dist / localisation / messages_zh.js introduits à la page:

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

utilisation

1, le contrôle des règles de validation écrite

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

Essayez »

2, le code de js règles de validation écrite

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

messages à un contrôle s'il n'y a pas de message, utiliseront les informations par défaut

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

Essayez »

nécessaire: la vraievaleur est un must.
requis: "#AA: coché" est une expression de vrai, vous devez vérifier.
requis: function () {} return true, exprimé la nécessité d' une vérification.

Deux couramment utilisé dans le dos, sous la forme doivent remplir ou pas remplir des éléments.

méthodes et attention aux problèmes communs

1, remplacer sinon le défaut SOUMETTRE

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

Way à utiliser ajax

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

Vous pouvez définir des valeurs par défaut valident libellés comme suit:

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

Si vous voulez soumettre le formulaire, vous devez form.submit (utiliser), au lieu de $ (formulaire) .submit ().

2, debug, la vérification est non seulement soumettre le formulaire

Si ce paramètre est vrai, alors la forme ne sont pas soumis, seuls les contrôles effectués, il est très pratique lors du débogage.

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

Si une page a de multiples formes veulent mettre à déboguer, utilisez:

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

3, ignorer: ignorer certains éléments ne sont pas vérifiées

ignore: ".ignore"

4. Changer l'emplacement du message d'erreur affiché

errorPlacement：Callback

Indiquez l'emplacement de déplacé, la valeur par défaut est: error.appendTo (element.parent ()); qui est le mauvais message derrière l'élément d'authentification.

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

Exemples

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

Essayez »

Le rôle du code est: Dans des circonstances normales, le message d'erreur est affiché dans la <td class = "status"> </ td> si la radio est affiché dans la <td> </ td>, si la case est affichée dans le contenu de derrière.

Habituellement, ces trois attributs simultanément, pour atteindre l'affichage de toutes les fonctions d'erreur dans un conteneur, et aucune information est automatiquement masquées.

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

5, modifier le style du message d'erreur affiché

Réglage erreur de style, vous pouvez augmenter l'icône est affichée, le système a établi un validation.css, conçu pour maintenir le style du document de vérification.

input.error {border: rouge 1px solid;}
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, chaque champ est vérifié par l'exécution d'une fonction

 succès: String, Callback 

Pour vérifier que les éléments de l'opération après la vérification, si elle est suivie par une chaîne qui sera traitée comme une classe css, mais aussi avec une fonction.

succès: function (label) {
    // Set & nbsp; en tant que texte pour IE
    label.html ( «& nbsp;»). addClass ( "vérifié");
    //label.addClass("valid").text("Ok! ")
}

Ajouter "valide" pour vérifier les éléments définis dans le style CSS <style> label.valid {} </ style>.

succès: "valide"

7, modifier la validation de déclenchement

Bien que ce qui suit est un booléen, mais recommandée, sauf si vous voulez faux, sinon Geler ajouté.

// Réinitialiser la forme $ (). Prêt (function () {
 var validateur = $ ( "# signupForm"). valider ({
        submitHandler: function (form) {
            alert ( "soumis");   
            form.submit ();
        }    
    });
    $ ( "# RAZ"). Cliquez sur (function () {
        validator.resetForm ();
    });

});

8, à la vérification asynchrone

 distance: URL 

Way pour authentifier en utilisant ajax, soumis à la valeur par défaut actuelle à une vérification d'adresse à distance, si nécessaire de soumettre d'autres valeurs, vous pouvez utiliser l'option de données.

 distance: "check-email.php" 

distance: {
    url: "check-email.php", // type Spooler: "post", // mode de transmission de données dataType: "json", // recevoir des données de format de données: {données de nom d'utilisateur // à transmettre: function ( ) {
            return $ ( "# username") val () .;
        }
    }
}

Adresse distante seule sortie "true" ou "false", ne peut pas avoir une autre sortie.

9, en ajoutant une validation personnalisée

 addMethod: nom, méthode, un message 

méthodes d'authentification personnalisée

// Personnages deux octets jQuery.validator.addMethod ( "byteRangeLength", fonction (valeur, élément, param) {
    longueur var = value.length;
    for (var i = 0; i <value.length; i ++) {
        if (value.charCodeAt (i)> 127) {
            longueur ++;
        }
    }
  retour this.optional (élément) || (longueur> = param [0] && longueur <= param [1]);   
}, $ .validator.format ( "Assurez-vous que la valeur est entrée dans {0} - {1} entre les octets (caractères un octet comptent 2)"));

// Code postal vérification jQuery.validator.addMethod ( "isZipCode", la fonction (valeur, élément) {   
    var tel = / ^ [0-9] {6} $ /;
    retour this.optional (élément) || (tel.test (valeur));
} "S'il vous plaît remplir le bon code postal");

Remarque: Pour ajouter fichier supplémentaire-methods.js ou ajouter le fichier jquery.validate.js.Recommandations généralement écrites dans le fichier supplémentaire-methods.js.

Remarque: fichier messages_cn.js, ajouter: isZipCode: "peut inclure du texte, des lettres, des chiffres et caractères de soulignement."Avant d'appeler Pour ajouter des références de fichiers supplémentaires-methods.js.

10, radio et case à cocher, sélectionnez la vérification

La radio doit sélectionner une représentation nécessaire.

<Input type = "radio" id = "gender_male" value = "m" name = "genre" nécessaire />
<Input type = "radio" id = valeur "gender_female" = "f" name = "genre" />

case à cocher doit sélectionner la représentation requise.

<Input type = "checkbox" class = "checkbox" id = "accord" name = "d'accord" nécessaire />

représente le nombre minimum de minlength case doit être cochée, maxlength représente le nombre maximum de sélectionné, rangelength: [2,3] représente le numéro de la plage sélectionnée.

<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "spam []" nécessaire minlength = "2" />
<Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "téléphone" name = "spam []" />
<Input type = "checkbox" class = "checkbox" id = valeur "spam_mail" = "mail" name = "spam []" />

sélectionnez le nécessaire montrant la valeur sélectionnée ne peut pas être vide.

<Sélectionner id = "jungle" name = title "jungle" = "S'il vous plaît choisir quelque chose!" Requis>
    <Option value = ""> </ option>
    <Option value = "1"> Buga </ option>
    <Option value = "2"> Baga </ option>
    <Option value = "3"> Oi </ option>
</ Select>

sélectionner la représentation minlength nombre sélectionné de minimum (choix multiple de sélection), maxlength représente le nombre maximum de sélectionné, rangelength: [2,3] représente le nombre de l'intervalle sélectionné.

<Select id = "fruit" name = titre "fruit" = "S'il vous plaît sélectionner au moins deux fruits" 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"> Tortue </ option>
</ Select>

jQuery.validate API chinoise

Validator

valider la méthode retourne un objet Validator. objet Validator a de nombreuses méthodes peuvent être utilisées pour déclencher la procédure d'étalonnage ou de modifier le contenu de la forme, plusieurs méthodes couramment utilisées sont énumérées ci-dessous.

Intégré dans l'authentification

valider () est facultative

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

(Méthode, nom message) méthode addMethod

Paramètres name est le nom de la méthode add.

Paramètre méthode est une fonction qui prend trois paramètres (valeur, élément, param).
La valeur est la valeur de l'élément, l'élément est l'élément lui-même, est le paramètre param.

Nous pouvons utiliser addMethod ajouter sauf la méthode d'authentification méthode de validation intégrée. Par exemple, il y a un champ, pour perdre seulement une lettre, la gamme est af, rédigé comme suit:

$ .validator.addMethod ( "Af", la fonction (valeur, élément, params) {  
	if (value.length> 1) {
		return false;
	}
    if (valeur> = params [0] && valeur <= params [1]) {
		return true;
	} Else {
		return false;
	}
}, "Doit être une lettre, et af");

S'il y a un champ de formulaire id = "username", écrit dans les règles:

nom d'utilisateur: {
   af: [ "a", "f"]
}

premier paramètre AddMethod est le nom de la méthode d'authentification à ajouter, puis est af.
troisième paramètre addMethod, un message d'erreur personnalisé, ce qui suggère ici est: "doit être une lettre, et af".
second paramètre addMethod est une fonction, ceci est plus important, le libellé de la décision d'utiliser cette méthode de vérification.

Si un seul paramètre, écrire directement, comme Nth: "a", alors ceci est un paramètre unique, si plus d'un paramètre qui est écrit dans [], séparés par des virgules.

Mode String méta

$ ( "# Myform"). Valider ({

   meta: «valider»,

   submitHandler: function () { 
alert ( "Soumis!")}

})

<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 = classe "email" = "{valider: {required: true, email: true}}" />

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

</ Form>

Exemples Démo

exemples fictifs

• Message d' erreur conteneur
• Message personnalisé comme un élément de données
• radio (boutons radio), case à cocher (bouton cocher) et sélectionnez (liste déroulante)
• forme interactive (formulaire) et le bouchon (soumission AJAX)
• méthodes de mesure et d' affichage de message
• Formulaires dynamiques
• Utilisez jQuery UI Themeroller forme personnalisée de style
• TinyMCE - un léger éditeur WYSIWYG basé sur un navigateur
• zone de saisie du fichier
• jQuery Mobile Forms Authentication

Des exemples de monde réel

• formulaire d'inscription au lait
• formulaire d'inscription Marketo
• sous forme de panneau de pliage de la vente des logements
• CAPTCHA à distance (PIN) vérification

Exemples Télécharger

Télécharger les instances officielles