O melhor tutorial jQuery Validate em 2024. Neste tutorial você pode aprender Import js biblioteca (usando este tutorial CDN),As regras de validação padrão,Dicas padrão,uso,Os métodos mais comuns e atenção aos problemas,API chinesa jQuery.validate,Exemplos Demonstração,
jQuery validar plugin para autenticação de formulários fornece um poderoso recurso que permite a validação de formulário do lado do cliente mais fácil, oferecendo uma abundância de opções de personalização para atender às necessidades de aplicação. O plug-in vem com um conjunto útil de métodos de validação, incluindo URL e autenticação de e-mail, enquanto fornece um método definido pelo usuário para a preparação do API. Todos método de ligação utilizando o Inglês como a mensagem de erro padrão, e foi traduzido para 37 outras línguas.
O plug-in é escrito e mantido pelo Jorn Zaefferer, ele é um membro da equipe de jQuery é principal desenvolvedor do time da jQuery UI é o pessoal de manutenção QUnit. O plug-in 2006 jQuery cedo, quando ele já está começando a emergir, e foi atualizado desde então. A versão atual é 1.14.0.
Acesso jQuery Validar o site oficial para baixar a última versão do jQuery Validar plugin.
Versão 1.14.0 Baixe este tutorial: http://static.w3write.com/download/jquery-validation-1.14.0.zip
<script src="http://static.w3write.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3write.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
Não. | regra | descrição |
---|---|---|
1 | requerida: true | Você deve entrar no campo. |
2 | remoto: "check.php" | Usando chamada de método ajax check.php validar o valor de entrada. |
3 | e-mail: true | Você deve inserir o formato de e-mail correto. |
4 | url: true | Você deve digitar o formato da URL correta. |
5 | Data: true | Você deve inserir o formato de data correta. IE6 cautela erro de validação de data. |
6 | dateiso: true | Você deve inserir o formato de data correta (ISO), por exemplo: 2009-06-23,1998 / 22/01. Verifica único formato que não valida. |
7 | número: true | Você deve digitar um número válido (números negativos, decimais). |
8 | dígitos: true | Você deve digitar um número inteiro. |
9 | cartão de crédito: | Você deve digitar um número de cartão de crédito válido. |
10 | equalTo: "# campo" | Valores de entrada deve #field mesma. |
11 | aceitar: | A cadeia de entrada tem uma extensão legítima (arquivos sufixo de upload). |
12 | maxlength: 5 | O comprimento máximo da cadeia de entrada 5 (contagem Kanji como um caractere). |
13 | minlength: 10 | O comprimento mínimo da cadeia de entrada é de 10 (personagens contam como um caractere). |
14 | rangelength: [5,10] | Comprimento da cadeia de entrada deve estar entre 5 e 10. (a kanji contagem de caracteres). |
15 | intervalo: [5,10] | Digite o valor deve estar entre 5 e 10. |
16 | máx: 5 | Insira um valor não superior a 5. |
17 | min: 10 | Insira um valor não inferior a 10. |
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 Validar fornece dicas pacote de informações chinesa, localizado no download do pacote de dist / localização / messages_zh.js, tem o seguinte teor:
(function( factory ) { if ( typeof define === "function" && define.amd ) { define( ["jquery", "pt/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} 的数值") }); }));
É possível localizar o arquivo de informações dist / localização / messages_zh.js introduzidas para a página:
<script src="http://static.w3write.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="http://static.w3write.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3write.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.w3write.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>
$().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: "请选择两个主题" } });
mensagens em um controle se não houver nenhuma mensagem, irá utilizar as informações padrão
<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>
necessários: valor realé uma obrigação.
requerido: "#AA: verificado" é uma expressão da verdade, você precisa verificar.
requerida: function () {} return true, expressou a necessidade de verificação.
Dois comumente utilizado nas costas, na forma precisa para preencher ou não preencher elementos.
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("提交事件!"); form.submit(); } }); });
Modo de usar ajax
$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })
Você pode definir valores padrão validar a seguinte redacção:
$.validator.setDefaults({ submitHandler: function(form) { alert("提交事件!");form.submit(); } });
Se você quiser enviar o formulário, você precisa usar form.submit (), em vez de $ (form) .submit ().
Se este parâmetro for verdade, então o formulário não for enviado, apenas os controlos efectuados, é muito conveniente quando a depuração.
$().ready(function() { $("#signupForm").validate({ debug:true }); });
Se uma página tem várias formas deseja definir para depurar, use:
$.validator.setDefaults({ debug: true })
ignore: ".ignore"
errorPlacement:Callback
Indicar a localização do extraviado, o padrão é: error.appendTo (element.parent ()); essa é a mensagem errada para trás elemento de autenticação.
errorPlacement: function(error, element) { error.appendTo(element.parent()); }
Exemplos
<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>
O papel do código é: Em circunstâncias normais, a mensagem de erro é exibida no <td class = "status"> </ td> se o rádio é exibido no <td> </ td>, se a caixa de seleção é exibida no conteúdo do para trás.
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
errorClass | String | 指定错误提示的 css 类名,可以自定义错误提示的样式。 | "error" |
errorElement | String | 用什么标签标记错误,默认是 label,可以改成 em。 | "label" |
errorContainer | Selector | 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。 errorContainer: "#messageBox1, #messageBox2" |
|
errorLabelContainer | Selector | 把错误信息统一放在一个容器里面。 | |
wrapper | String | 用什么标签再把上边的 errorELement 包起来。 |
Geralmente, esses três atributos simultaneamente, para alcançar exibição todas as funções de erro em um recipiente, e nenhuma informação é automaticamente escondido.
errorContainer: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li"
Definição de erro de estilo, você pode aumentar o ícone é exibido, o sistema criou um validation.css, projetado para manter o estilo do documento de verificação.
input.error {border: 1px vermelho contínuo;} label.error { background: url ( "Demo ./ / imagens / 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; }
sucesso: String, Callback
Para verificar se os elementos de operação após a verificação, se seguidas por uma seqüência de caracteres que serão tratados como uma classe css, mas também com uma função.
success: function (etiqueta) { // Set & nbsp; como texto para o IE label ( "& nbsp;"). addClass ( "marcada"); //label.addClass("valid").text("Ok! ") }
Adicionar "válido" para verificar os elementos definidos no estilo CSS <style> label.valid {} </ style>.
sucesso: "válido"
Embora o seguinte é um booleano, mas recomendado a menos que queira falsa, caso contrário Congelar acrescentou.
触发方式 | 类型 | 描述 | 默认值 |
---|---|---|---|
onsubmit | Boolean | 提交时验证。设置为 false 就用其他方法去验证。 | true |
onfocusout | Boolean | 失去焦点时验证(不包括复选框/单选按钮)。 | true |
onkeyup | Boolean | 在 keyup 时验证。 | true |
onclick | Boolean | 在点击复选框和单选按钮时验证。 | true |
focusInvalid | Boolean | 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 | true |
focusCleanup | Boolean | 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 | false |
// Redefinir o formulário $ (). Ready (function () { var validador = $ ( "# signupForm"). validar ({ submitHandler: function (form) { alert ( "submetido"); form.submit (); } }); $ ( "# Reset"). Click (function () { validator.resetForm (); }); });
remoto: URL
Forma de autenticar usando ajax, apresentada para o valor padrão atual para uma verificação de endereço remoto, se obrigados a apresentar outros valores, você pode usar a opção de dados.
remoto: "check-email.php"
remoto: { url: "check-email.php", // tipo Spooler: "post", // modo de transmissão de dados dataType: "json", // receber dados formato de dados: {dados de nome de usuário // a serem transmitidos: function ( ) { return $ ( "# username") val () .; } } }
Endereço remoto única saída "verdadeiro" ou "falso", não pode ter outra saída.
addMethod: nome, método, mensagem
métodos de autenticação personalizados
// Personagens dois bytes jQuery.validator.addMethod ( "byteRangeLength", function (value, elemento, param) { var comprimento = value.length; for (var i = 0; i <value.length; i ++) { Se (value.charCodeAt (i)> 127) { comprimento ++; } } voltar this.optional (elemento) || (comprimento> = param [0] && comprimento <= param [1]); }, $ .validator.format ( "Certifique-se que o valor inserido no {0} - {1} entre bytes (caracteres de um byte contar 2)")); // Verificação Código postal jQuery.validator.addMethod ( "isZipCode", function (value, elemento) { var tel = / ^ [0-9] {6} $ /; voltar this.optional (elemento) || (tel.test (valor)); } "Por favor preencha o correto seu CEP");
Nota: Para adicionar arquivo adicional-methods.js ou adicionar arquivo jquery.validate.js.Recomendações geralmente escrito em arquivo adicional-methods.js.
Nota: file messages_cn.js, adicione: isZipCode: "pode incluir texto, letras, números e sublinhados."Antes de chamar Para adicionar referências de arquivo adicionais-methods.js.
O rádio deve selecionar uma representação necessária.
<Input type = "radio" id = "gender_male" value = "m" name = "género" necessária /> <Input type = "radio" id = valor "gender_female" = "f" name = "gênero" />
checkbox deve selecionar a representação necessária.
<Input type = "checkbox" class = "checkbox" id = "concordo" name = "concordam" necessária />
representa o número mínimo de caixa minlength deve ser verificado, maxlength representa o número máximo de seleccionado, rangelength: [2,3] representa o número do intervalo seleccionado.
<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "o spam []" necessária minlength = "2" /> <Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "telefone" name = "o spam []" /> <Input type = "checkbox" class = "checkbox" id = valor "spam_mail" = "mail" name = "o spam []" />
selecione a necessária mostrando o valor selecionado não pode estar vazio.
<Id = "selva" name = "selva" title = "Por favor, selecione alguma coisa!" Required> <Option value = ""> </ option> <Option value = "1"> Buga </ option> <Option value = "2"> Baga </ option> <Option value = "3"> Oi </ option> </ Select>
seleccionar o número seleccionado representação minlength mínimo de (escolha múltipla de Select), maxlength representa o número máximo de seleccionado, rangelength: [2,3] representa o número do intervalo seleccionado.
<Id = "fruto" name = título "fruto" = "Por favor selecione pelo menos duas frutas" class = "{exigida: true, minlength: 2}" multiple = "multiple"> <Opção value = "b"> Banana </ option> <Option value = "a"> Apple </ option> <Option value = "p"> Peach </ option> <Opção value = "t"> Turtle </ option> </ Select>
名称 | 返回类型 | 描述 |
---|---|---|
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,argumentNpt.) | String | 用参数代替模板中的 {n}。 |
validar método retorna um objeto Validator. objeto validador tem muitos métodos podem ser usados para desencadear o procedimento de calibração ou alterar o conteúdo da forma, vários métodos vulgarmente utilizados estão listados abaixo.
名称 | 返回类型 | 描述 |
---|---|---|
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 | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
名称 | 返回类型 | 描述 |
---|---|---|
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 | 验证美式的电话号码。 |
描述 | 代码 |
---|---|
debug:进行调试模式(表单不提交)。 |
$(".selector").validate ({ debug:true }) |
把调试设置为默认。 |
$.validator.setDefaults({ debug:true }) |
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } }) |
ignore:对某些元素不进行验证。 |
$("#myform").validate({ ignore:".ignore" }) |
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } }) |
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } } }) |
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。 |
$("#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 }) |
OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。 |
$(".selector").validate({ onsubmit:false }) |
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。 |
$(".selector").validate({ onfocusout:false }) |
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。 |
$(".selector").validate({ onkeyup:false }) |
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。 |
$(".selector").validate({ onclick:false }) |
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 |
$(".selector").validate({ focusInvalid:false }) |
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。 |
$(".selector").validate({ focusCleanup:true }) |
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。 |
$(".selector").validate({ errorClass:"invalid" }) |
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。 |
$(".selector").validate errorElement:"em" }) |
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。 |
$(".selector").validate({ wrapper:"li" }) |
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } }) |
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary")("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } }) |
errorPlacement:跟一个函数,可以自定义错误放到哪里。 |
$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true }) |
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } }) |
highlight:可以给未通过验证的元素加效果、闪烁等。 |
Parâmetros nome é o nome do método add.
método parâmetro é uma função que leva três parâmetros (valor, elemento, param).
valor é o valor do elemento, elemento é o elemento propriamente dito, param é o parâmetro.
Podemos usar addMethod para adicionar exceto o método de validação de método de autenticação embutido. Por exemplo, existe um campo, apenas para perder uma carta, o intervalo é de AF, escrito da seguinte forma:
$ .validator.addMethod ( "AF", function (value, elemento, params) { Se (value.length> 1) { return false; } if (valor> = params [0] && valor <= params [1]) { return true; } Else { return false; } }, "Deve ser uma letra, e af");
Se houver um campo de formulário id = "username", escrito nas regras:
nome de usuário: { AF: [ "um", "f"] }
addMethod primeiro parâmetro é o nome do método de autenticação para adicionar, em seguida, é af.
addMethod terceiro parâmetro, uma mensagem de erro personalizada, sugerindo aqui é: "deve ser uma letra, e af".
segundo parâmetro addMethod é uma função, isso é mais importante, o texto da decisão de usar este método de verificação.
Se apenas um parâmetro, escreva diretamente, tais como af: "a", então este é um parâmetro único, se mais de um parâmetro é escrito em [], separados por vírgulas.
$ ( "# Myform"). Validar ({ meta: "validar", submitHandler: function () { alert ( "enviado!")} })
<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" = "{validar: {exigida: true, e-mail: true}}" /> <Input type = "submit" value = "Submit" /> </ Form>