jQuery Validate 表单考证之壮大插件

2024年4月4日 122次阅读 来源: 葡萄酒不吐葡萄皮

jQuery Validate 插件为表单供应了壮大的考证功用，让客户端表单考证变得更简朴，同时供应了大批的定制选项，满足应用顺序种种需求。该插件绑缚了一套有用的考证要领，包含 URL 和电子邮件考证，同时供应了一个用来编写用户自定义要领的 API。一切的绑缚要领默许运用英语作为毛病信息，且已翻译成其他 37 种言语。

该插件是由 Jörn Zaefferer 编写和保护的，他是 jQuery 团队的一位成员，是 jQuery UI 团队的主要开发职员，是 QUnit 的保护职员。该插件在 2006 年 jQuery 初期的时刻就已最先涌现，并一向更新至今。如今版本是 1.14.0。

接见 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

<script src=”” target=”_blank”>http://xxx.com/assets/jquery-…
<script src=”” target=”_blank”>http://xxx/assets/jquery-vali…

默许校验划定规矩
序号 划定规矩 形貌
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。

默许提醒
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供应了中文信息提醒包，位于下载包的 dist/localization/messages_zh.js，内容以下：
(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} 的数值")

});

}));

你能够将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：

<script src=”” target=”_blank”>http://xxx/jquery-validation-…

</script>

运用体式格局
1、将校验划定规矩写到控件中

<script src=”” target=”_blank”>http://xxx.com/jquery-validat…
<script src=”” target=”_blank”>http://xxx.com/assets/jquery-…
<script src=”” target=”_blank”>http://xxx.com/assets/jquery-…
<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>

2、将校验划定规矩写到 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 处，假如某个控件没有 message，将挪用默许的信息

<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>
required: true 值是必须的。
required: “#aa:checked” 表达式的值为真，则须要考证。
required: function(){} 返回为真，示意须要考证。

后边两种经常使用于，表单中须要同时填或不填的元素。
经常使用要领及注重题目
1、用其他体式格局替换默许的 SUBMIT

$().ready(function() {
$(“#signupForm”).validate({

    submitHandler:function(form){
        alert("提交事宜!");   
        form.submit();
    }    
});

});

运用 ajax 体式格局

$(“.selector”).validate({
submitHandler: function(form)
{

  $(form).ajaxSubmit();

}
})

能够设置 validate 的默许值，写法以下：

$.validator.setDefaults({
submitHandler: function(form) { alert(“提交事宜!”);form.submit(); }
});

假如想提交表单, 须要运用 form.submit()，而不要运用 $(form).submit()。
2、debug，只考证不提交表单

假如这个参数为true，那末表单不会提交，只举行搜检，调试时非常轻易。

$().ready(function() {
$(“#signupForm”).validate({

    debug:true
});

});

假如一个页面中有多个表单都想设置成为 debug，则运用：

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

3、ignore：疏忽某些元素不考证

ignore: “.ignore”

4、变动毛病信息显现的位置

errorPlacement：Callback

指明毛病安排的位置，默许状况是：error.appendTo(element.parent());即把毛病信息放在考证的元素背面。

errorPlacement: function(error, element) {

error.appendTo(element.parent());

}

实例

<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>
代码的作用是：平常状况下把毛病信息显如今 <td class=”status”></td> 中，假如是 radio 则显如今 <td></td> 中，假如是 checkbox 则显如今内容的背面。
参数 范例 形貌 默许值
errorClass String 指定毛病提醒的 css 类名，能够自定义毛病提醒的款式。 “error”
errorElement String 用什么标签标记毛病，默许是 label，能够改成 em。 “label”
errorContainer Selector 显现或许隐蔽考证信息，能够自动完成有毛病信息涌现时把容器属性变成显现，无毛病时隐蔽，用途不大。
errorContainer: “#messageBox1, #messageBox2”
errorLabelContainer Selector 把毛病信息一致放在一个容器内里。
wrapper String 用什么标签再把上边的 errorELement 包起来。

平常这三个属性同时运用，完成在一个容器内显现一切毛病提醒的功用，而且没有信息时自动隐蔽。

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

5、变动毛病信息显现的款式

设置毛病提醒的款式，能够增添图标显现，在该体系中已建立了一个 validation.css，特地用于保护校验文件的款式。

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、每一个字段考证经由过程实行函数

success：String,Callback

要考证的元素经由过程考证后的行动，假如跟一个字符串，会看成一个 css 类，也可跟一个函数。

success: function(label) {

// set &nbsp; as text for IE
label.html("&nbsp;").addClass("checked");
//label.addClass("valid").text("Ok!")

}

增加 “valid” 到考证元素，在 CSS 中定义的款式 <style>label.valid {}</style>。

success: “valid”

7、考证的触发体式格局修正

下面的虽然是 boolean 型的，但发起除非要改成 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、异步考证

remote：URL

运用 ajax 体式格局举行考证，默许会提交当前考证的值到长途地点，假如须要提交其他的值，能够运用 data 选项。

remote: “check-email.php”

remote: {

url: "check-email.php",     //背景处置惩罚顺序
type: "post",               //数据发送体式格局
dataType: "json",           //吸收数据花样   
data: {                     //要通报的数据
    username: function() {
        return $("#username").val();
    }
}

}

长途地点只能输出 “true” 或 “false”，不能有其他输出。
9、增加自定义校验

addMethod：name, method, message

自定义考证要领

// 中文字两个字节
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));

}, “请准确填写您的邮政编码”);

注重：要在 additional-methods.js 文件中增加或许在 jquery.validate.js 文件中增加。发起平常写在 additional-methods.js 文件中。

注重：在 messages_cn.js 文件中增加：isZipCode: “只能包含中文字、英文字母、数字和下划线”。挪用前要增加对 additional-methods.js 文件的援用。
10、radio 和 checkbox、select 的考证

radio 的 required 示意必须选中一个。

<input type=”radio” id=”gender_male” value=”m” name=”gender” required />
<input type=”radio” id=”gender_female” value=”f” name=”gender”/>

checkbox 的 required 示意必须选中。

<input type=”checkbox” class=”checkbox” id=”agree” name=”agree” required />

checkbox 的 minlength 示意必须选中的最小个数，maxlength 示意最大的选中个数，rangelength:[2,3] 示意选中个数区间。

<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 的 required 示意选中的 value 不能为空。

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

select 的 minlength 示意选中的最小个数（可多选的 select），maxlength 示意最大的选中个数，rangelength:[2,3] 示意选中个数区间。

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

jQuery.validate 中文 API
称号 返回范例 形貌
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 要领返回一个 Validator 对象。Validator 对象有许多要领能够用来激发校验顺序或许转变 form 的内容，下面列出几个经常使用的要领。
称号 返回范例 形貌
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 考证美式的电话号码。
validate ()的可选项
形貌 代码
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").html("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：能够给未经由过程考证的元素加结果、闪灼等。
addMethod(name,method,message)要领

参数 name 是增加的要领的名字。

参数 method 是一个函数，吸收三个参数 (value,element,param) 。
value 是元素的值，element 是元素自身，param 是参数。

我们能够用 addMethod 来增加除内置的 Validation 要领以外的考证要领。比方有一个字段，只能输一个字母，局限是 a-f，写法以下：

$.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”);

假如有个表单字段的 id=”username”，则在 rules 中写：

username:{
af:[“a”,”f”]
}

addMethod 的第一个参数，是增加的考证要领的名字，这时候是 af。
addMethod 的第三个参数，是自定义的毛病提醒，这里的提醒为:”必须是一个字母,且a-f”。
addMethod 的第二个参数，是一个函数，这个比较主要，决议了用这个考证要领时的写法。

假如只要一个参数，直接写，比方 af:”a”，那末 a 就是这个唯一的参数，假如多个参数，则写在 [] 里，用逗号离开。
meta String 体式格局

$(“#myform”).validate({

meta:”validate”,

submitHandler:function() {
alert(“Submitted!”) }

})

<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=”{validate:{ required:true,email:true }}” />

<input type=”submit”
value=”Submit” />

</form>

    原文作者：葡萄酒不吐葡萄皮
    原文地址: https://segmentfault.com/a/1190000009671172
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞