jQuery Valider
jQuery Validate
Le plug-in jQuery Validate fournit de puissantes fonctions de validation pour les formulaires, facilitant la validation des formulaires côté client et fournissant un grand nombre d'options de personnalisation pour répondre à divers besoins d'application. Le plugin regroupe un ensemble de méthodes de validation utiles, notamment la validation d'URL et de courrier électronique, et fournit une API pour écrire des méthodes définies par l'utilisateur. Toutes les méthodes groupées utilisent par défaut l'anglais pour les messages d'erreur et ont été traduites dans 37 autres langues.
Ce plugin est écrit et maintenu par Jörn Zaefferer, membre de l'équipe jQuery, développeur principal de l'équipe jQuery UI et responsable de QUnit. Ce plugin existe depuis les débuts de jQuery en 2006 et a été mis à jour depuis. La version actuelle est 1.14.0.
Visitez le site officiel de jQuery Validate et téléchargez la dernière version du plug-in jQuery Validate.
Importer la bibliothèque js
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
Règles de vérification par défaut
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required:true | 必须输入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| 3 | email:true | 必须输入正确格式的电子邮件。 |
| 4 | url:true | 必须输入正确格式的网址。 |
| 5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| 6 | dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| 7 | number:true | 必须输入合法的数字（负数，小数）。 |
| 8 | digits:true | 必须输入整数。 |
| 9 | creditcard: | 必须输入合法的信用卡号。 |
| 10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
| 11 | accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| 12 | maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| 13 | minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| 14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| 15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| 16 | max:5 | 输入值不能大于 5。 |
| 17 | min:10 | 输入值不能小于 10。 |
Invite 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 Validate fournit un package d'invite de message chinois, qui se trouve dans dist/localization/messages_zh.js du package de téléchargement. Le contenu est le suivant :
(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, 中文 (Zhōngwé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 le message Le fichier dist/localization/messages_zh.js est introduit dans la page :
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
Utilisation
1 Écrivez les règles de vérification dans le contrôle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<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>
</body>
</html>. Essayez-le
2. Écrivez les règles de vérification dans le code 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: "请选择两个主题" }});messages Si un contrôle n'a pas de message, le message par défaut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().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: "请选择两个主题"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<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" style="display:none">至少选择两个</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>sera appelé. . Essayez-le
obligatoire : la valeur true est obligatoire.
obligatoire : "#aa:checked" Si la valeur de l'expression est vraie, une vérification est requise.
obligatoire : function(){} renvoie vrai, indiquant qu'une vérification est requise.
Ces deux derniers sont couramment utilisés pour les éléments du formulaire qui doivent être remplis ou omis en même temps.
Méthodes courantes et problèmes à noter
1. Utilisez d'autres méthodes pour remplacer la valeur par défaut SUBMIT
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit(); }
});});Utilisez la méthode ajax
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})pour définir la valeur par défaut. de valider. L'écriture est la suivante :
$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");form.submit(); }});Si vous souhaitez soumettre le formulaire, vous devez utiliser form.submit() au lieu de $(form).submit().
2. Déboguer, vérifier uniquement mais pas soumettre le formulaire
Si ce paramètre est vrai, alors le formulaire ne sera pas soumis et uniquement vérifié, ce qui est très pratique pour le débogage.
$().ready(function() {
$("#signupForm").validate({
debug:true });});S'il y a plusieurs formulaires sur une page que vous souhaitez définir comme débogage, utilisez :
$.validator.setDefaults({
debug: true})ignorer : ignorez certains éléments et ne vérifiez pas
ignore: ".ignore"
. 4. Modifiez la position où le message d'erreur est affiché
errorPlacement：Callback
indique la position où l'erreur est placée. La valeur par défaut est : error.appendTo(element.parent()); derrière l'élément vérifié.
errorPlacement: function(error, element) {
error.appendTo(element.parent()); }Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 提交时验证表单
var validator = $("#form1").validate({
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
errorElement: "span",
messages: {
user: {
required: " (必需字段)",
minlength: " (不能少于 3 个字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 个且不能大于 12 个)",
maxlength: " (字母不能少于 5 个且不能大于 12 个)"
}
}
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>登录框</legend>
<p>
<label for="user">用户名</label>
<input id="user" name="user" required minlength="3">
</p>
<p>
<label for="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>
</body>
</html>Essayez-le
La fonction du code est : Généralement, le message d'erreur s'affiche dans <td class="status"></td>, s'il s'agit de radio, il sera affiché dans <td></td>, s'il s'agit d'une case à cocher, il sera affiché derrière le contenu.
| Paramètres | Type | Description | Valeur par défaut | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| errorClass | < td>StringSpécifiez le nom de classe CSS de l'invite d'erreur et vous pouvez personnaliser le style de l'invite d'erreur. | "error" | |||||||||||||||||||||||||
| errorElement | String | Quelle étiquette utiliser pour marquer les erreurs, la valeur par défaut est une étiquette, elle peut être remplacée par em. | "label" | ||||||||||||||||||||||||
| errorContainer | Sélecteur | Afficher ou masquer les informations de vérification, qui peuvent être automatiquement implémenté Il est peu utile de modifier les propriétés du conteneur pour les afficher lorsqu'un message d'erreur apparaît et les masquer lorsqu'il n'y a pas d'erreur.
| <🎜> | ||||||||||||||||||||||||
| errorLabelContainer | Sélecteur | < td>Mettre les informations d'erreur dans un conteneur.<🎜> | |||||||||||||||||||||||||
| wrapper | String | Quelle balise doit être utilisée pour envelopper l'errorELement ci-dessus ? | <🎜> |
Généralement, ces trois attributs sont utilisés en même temps pour réaliser la fonction d'affichage de toutes les invites d'erreur dans un conteneur et de les masquer automatiquement lorsqu'il n'y a aucune information.
errorContainer: "div.error",errorLabelContainer: $("#signupForm div.error"),wrapper: "li"5. Changez le style d'affichage du message d'erreur
Définissez le style d'invite d'erreur, vous pouvez ajouter l'affichage d'icônes, un fichier validation.css a été établi dans ce système, spécifiquement pour la maintenance et vérification Le style du fichier.
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. Chaque champ est vérifié en exécutant la fonction
success：String,Callback
L'action après que l'élément à vérifier passe la vérification S'il est suivi d'une chaîne, il sera traité comme une classe CSS, ou il peut être suivi d'une fonction.
success: function(label) { // set as text for IE
label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!")}Ajoutez "valid" à l'élément de validation avec le style défini dans CSS <style>label.valid {}</style>.
success: "valid"
7. Modification de la méthode de déclenchement de la vérification
Bien que ce qui suit soit de type booléen, il est recommandé de ne pas l'ajouter de manière aléatoire sauf si vous souhaitez le changer en false.
| 触发方式 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| onsubmit | Boolean | 提交时验证。设置为 false 就用其他方法去验证。 | true |
| onfocusout | Boolean | 失去焦点时验证（不包括复选框/单选按钮）。 | true |
| onkeyup | Boolean | 在 keyup 时验证。 | true |
| onclick | Boolean | 在点击复选框和单选按钮时验证。 | true |
| focusInvalid | Boolean | 提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。 | true |
| focusCleanup | Boolean | 如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。 | false |
// 重置表单$().ready(function() { var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit(); }
});
$("#reset").click(function() {
validator.resetForm(); });});8. Vérification asynchrone
remote：URL
Utilisez ajax pour la vérification Par défaut, la valeur vérifiée actuelle sera soumise à l'adresse distante. Si vous devez soumettre d'autres valeurs, vous pouvez utiliser l'option de données.
remote: "check-email.php"rrree
L'adresse distante ne peut afficher que "vrai" ou "faux" et aucune autre sortie.
9. Ajouter une vérification personnalisée
remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
username: function() { return $("#username").val(); } }}Méthode de vérification personnalisée
addMethod：name, method, message
Remarque : Pour ajouter ou ajouter un fichier jquery.validate.js. Il est recommandé de l'écrire dans le fichier additionnel-methods.js.
Remarque : Ajoutez : isZipCode : "ne peut inclure que des caractères chinois, des lettres anglaises, des chiffres et des soulignements" dans le fichier messages_cn.js. Ajoutez une référence au fichier additionnel-methods.js avant d'appeler.
10. Vérification de la radio, case à cocher et sélection
Le requis dans la radio signifie qu'il faut en sélectionner une.
// 中文字两个字节jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){
length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));// 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");La case à cocher requise dans signifie qu'elle doit être sélectionnée. La minlength de la case à cocher
<input type="radio" id="gender_male" value="m" name="gender" required /><input type="radio" id="gender_female" value="f" name="gender"/>
représente le nombre minimum qui doit être sélectionné, maxlength représente le nombre maximum de sélections et rangelength:[2,3] représente la plage du nombre de sélections. Le obligatoire dans
<input type="checkbox" class="checkbox" id="agree" name="agree" required />
select signifie que la valeur sélectionnée ne peut pas être vide. La longueur minimale de
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" /><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select représente le nombre minimum de sélections (sélection qui peut être sélectionnée plusieurs fois), maxlength représente le nombre maximum de sélections et rangelength :[2,3] représente la plage du nombre de sélections.
<select id="jungle" name="jungle" title="Please select something!" required> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option></select>
API chinoise jQuery.validate
| 名称 | 返回类型 | 描述 |
|---|---|---|
| validate(options) | Validator | 验证所选的 FORM。 |
| valid() | Boolean | 检查是否验证通过。 |
| rules() | Options | 返回元素的验证规则。 |
| rules("add",rules) | Options | 增加验证规则。 |
| rules("remove",rules) | Options | 删除验证规则。 |
| removeAttrs(attributes) | Options | 删除特殊属性并且返回它们。 |
| 自定义选择器 | ||
| :blank | Validator | 没有值的筛选器。 |
| :filled | Array <Element> | 有值的筛选器。 |
| :unchecked | Array <Element> | 没选择的元素的筛选器。 |
| 实用工具 | ||
| jQuery.format(template,argument,argumentN...) | String | 用参数代替模板中的 {n}。 |
Validator
validate renvoie un objet Validator. L'objet Validator dispose de nombreuses méthodes qui peuvent être utilisées pour déclencher le programme de validation ou modifier le contenu du formulaire. Voici quelques méthodes couramment utilisées.
| 名称 | 返回类型 | 描述 |
|---|---|---|
| form() | Boolean | 验证 form 返回成功还是失败。 |
| element(element) | Boolean | 验证单个元素是成功还是失败。 |
| resetForm() | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。 |
| showErrors(errors) | undefined | 显示特定的错误信息。 |
| Validator 函数 | ||
| setDefaults(defaults) | undefined | 改变默认的设置。 |
| addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。 |
| addClassRules(name,rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。 |
| addClassRules(rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
Méthode de vérification intégrée
| 名称 | 返回类型 | 描述 |
|---|---|---|
| required() | Boolean | 必填验证元素。 |
| required(dependency-expression) | Boolean | 必填元素依赖于表达式的结果。 |
| required(dependency-callback) | Boolean | 必填元素依赖于回调函数的结果。 |
| remote(url) | Boolean | 请求远程校验。url 通常是一个远程调用方法。 |
| minlength(length) | Boolean | 设置最小长度。 |
| maxlength(length) | Boolean | 设置最大长度。 |
| rangelength(range) | Boolean | 设置一个长度范围 [min,max]。 |
| min(value) | Boolean | 设置最小值。 |
| max(value) | Boolean | 设置最大值。 |
| email() | Boolean | 验证电子邮箱格式。 |
| range(range) | Boolean | 设置值的范围。 |
| url() | Boolean | 验证 URL 格式。 |
| date() | Boolean | 验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。 |
| dateISO() | Boolean | 验证 ISO 类型的日期格式。 |
| dateDE() | Boolean | 验证德式的日期格式（29.04.1994 或 1.1.2006）。 |
| number() | Boolean | 验证十进制数字（包括小数的）。 |
| digits() | Boolean | 验证整数。 |
| creditcard() | Boolean | 验证信用卡号。 |
| accept(extension) | Boolean | 验证相同后缀名的字符串。 |
| equalTo(other) | Boolean | 验证两个输入框的内容是否相同。 |
| phoneUS() | Boolean | 验证美式的电话号码。 |
Options de valider ()
| 描述 | 代码 |
|---|---|
| debug：进行调试模式（表单不提交）。 | <select id="fruit" name="fruit" title="Please select at least two 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">Turtle</option></select> |
| 把调试设置为默认。 | $(".selector").validate({
debug:true}) |
| submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。 | $.validator.setDefaults({
debug:true}) |
| ignore：对某些元素不进行验证。 | $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();}}) |
| rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。 | $("#myform").validate({
ignore:".ignore"}) |
| messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}}}) |
| groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}},
messages:{
name:"Name不能为空",
email:{
required:"E-mail不能为空",
email:"E-mail地址不正确"}}}) |
| OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。 | $("#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}) |
| onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。 | $(".selector").validate({
onsubmit:false}) |
| onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。 | $(".selector").validate({
onfocusout:false}) |
| onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。 | $(".selector").validate({
onkeyup:false}) |
| focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。 | $(".selector").validate({
onclick:false}) |
| focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。 | $(".selector").validate({
focusInvalid:false}) |
| errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。 | $(".selector").validate({
focusCleanup:true}) |
| errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。 | $(".selector").validate({
errorClass:"invalid"}) |
| wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。 | $(".selector").validate
errorElement:"em"}) |
| errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。 | $(".selector").validate({
wrapper:"li"}) |
| showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。 | $("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}}) |
| errorPlacement：跟一个函数，可以自定义错误放到哪里。 | $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}}) |
| success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。 | $("#myform").validate({
errorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td")); },
debug:true}) |
| highlight：可以给未通过验证的元素加效果、闪烁等。 |
méthode addMethod(name, method, message)
Le nom du paramètre est le nom de la méthode ajoutée.
La méthode Paramètre est une fonction qui reçoit trois paramètres (valeur, élément, param).
value est la valeur de l'élément, element est l'élément lui-même et param est le paramètre.
Nous pouvons utiliser addMethod pour ajouter des méthodes de validation en plus de la méthode de validation intégrée. Par exemple, il y a un champ dans lequel vous ne pouvez saisir qu'une seule lettre, et la plage est a-f. L'écriture est la suivante :
$("#myform").validate({
success:"valid",
submitHandler:function() {
alert("Submitted!")
}})S'il y a un champ de formulaire avec id="username", écrivez dans le champ. règles :
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){return false;} if(value>=params[0] && value<=params[1]){return true;}else{return false;}},"必须是一个字母,且a-f"); Le premier paramètre de addMethod est le nom de la méthode de vérification ajoutée, qui est af dans ce cas.
Le troisième paramètre de addMethod est une invite d'erreur personnalisée. L'invite ici est : "Doit être une lettre, et a-f".
Le deuxième paramètre de addMethod est une fonction. Ceci est plus important et détermine la méthode d'écriture lors de l'utilisation de cette méthode de vérification.
S'il n'y a qu'un seul paramètre, écrivez-le directement, comme af : "a", alors a est le seul paramètre, écrivez-les entre [] et séparez-les par des virgules.
Méthode méta chaîne
username:{
af:["a","f"]}$("#myform").validate({
meta:"validate",
submitHandler:function() { alert("Submitted!") }})
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
