1、默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(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
2、默认的提示
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).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
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}.")
},
如需要修改，可在js代码中加入：
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
})
3、使用方法
1）将校验规则写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate()
})
<form id="signupForm" method="get" action="">
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
<input class="submit" type="submit" value="Submit"/>
</form>
2）将校验规则写到代码中
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
})
})
//messages处，如果某个控件没有message，将调用默认的信息
<form id="signupForm" method="get" action="">
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
<label for="email">E-Mail</label>
<input id="email" name="email" />
<label for="password">Password</label>
<input id="password" name="password" type="password" />
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
<input class="submit" type="submit" value="Submit"/>
</form>
1.flavr—超级漂亮的jQuery扁平弹出对话框
2.轻量级触摸响应滑块插件JQuery lightSlider
3.带37种3D动画特效的跨浏览器CSS3动画框架
4.jquery整屏滚动插件Scrollify
5.jquery旋转木马插件SLICK
6.jquery文字动画插件LetterFX
7.jquery文本翻转插件Wodry.js
8.jquery通知插件toastr
9.jQuery滚动执行动画插件FadeThis
10.jquery表单验证插件Bootstrap Validator
11.jCountdown倒计时插件jQuery
12.iCheck不一样的checkbok
13.Owl Carousel强大的响应式jQuery焦点图轮播插件
14.magic-带64种动画效果的CSS3动画库
15.jQuery实时搜索插件-HideSeek
16.bootstrap modal对话框
17.一款模拟CSS3动画的js插件-move.js
18.可替代CSS3 transition和transform的jQuery插件
19.基于bootstrap的jQuery多功能模态对话框插件
20.带CSS3过渡效果的js模态窗口插件
21.支持移动触摸设备的简洁js幻灯片插件
22.jQuery轻量级响应式扁平风格tabs选项卡插件
23.jQuery轻量级响应式Tooltip插件
24.jQuery简单且功能强大的图片剪裁插件
25.带CSS3动画过渡效果的jQuery模态窗口插件
26.中国省市区地址三级联动jQuery插件
27.移动端优先且支持jQuery和Zepto的模态对话框插件
28.jQuery简单实用的tooltip插件
29.带CSS3过渡动画效果的jQuery Tabs选项卡插件
30.x0popup-纯js弹出对话框插件
31.WOW.js-元素在页面滚动时展示CSS3动画JS插件
32.Windows8样式的消息提示框jQuery插件
33.jQuery星级评分插件
34.fsBanner-实用的网站响应式Banner手风琴插件
35.draggabilly-功能强大的拖动拖拽元素插件
36.验证插件vali.js
37.响应式jQuery图片放大镜插件magnificent.js
38.可快速生成各种阴影效果的jQuery插件
39.基于jquery的非常逼真的全屏下雪效果
40.纯文本Loading加载指示器特效
