一、首先在加入函数 $("#login").validate(）的时候要注意里面默认的规则，有很多是不需要加上去的，详见最后的例子；
(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
二、导入jquery跟validate.js就不说了吧~~~
三、你在不写message自定义的时候，它会有默认提示，如下；
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}.")
},
四、如果要修改的话这样就可以了；
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} 的值")
});
五、下面是自己写的一个demo，里面注释写的很详细，应该没什么问题的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="keywords" content="">
<meta name="description" content="">
<title id="title">jquery validata js_表单验证</title>
<link type="text/css" rel="stylesheet" href="css/base.css">
<style type="text/css">
#login{width:500px;margin:100px auto;}
#login li{padding: 5px 10px;}
.sub{margin-left: 60px;cursor: pointer;}
form .highlight{ background-color:#e2e2e2;}
/*定义错误信息输出的样式*/
.error{font-size: 10px;color: #cd0a0a;}
</style>
</head>
<body>
<form method="post" action="" id="login">
<ul>
<li>
<label>账户</label>
<input type="text" name="email" class="required email" id="email"/>
<br/>
</li>
<li>
<label>密码</label>
<input type="password" name="password" id="pass" class="required" minlength="6" maxlength="10"/>
</li>
<li>
<input type="submit" name="sub" class="sub" id="sub"/>
</li>
</ul>
<div id="messageBox"></div>
</form>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(function() {
// highlight
var elements = $("input[type!='submit'], textarea, select");
elements.focus(function() { //只是跟li添加样式，跟validata无关
$(this).parents('li').addClass('highlight');
});
elements.blur(function() {
$(this).parents('li').removeClass('highlight');
});
$("#login").validate({
debug:true, //debug:进行调试模式（表单不提交）:
ignore:".ignore", //对某些元素不进行验证
errorLabelContainer: "#messageBox", //显示错误信息的容器ID
wrapper: "li", //包含每个错误信息的容器
onsubmit:true, //是否提交时验证
onfocusout:true, //是否在获取焦点时验证
onclick:true, //是否在鼠标点击时验证（一般验证checkbox,radiobox）
errorElement:"em", //errorElement String 默认:"label" 使用什么标签标记错误
// errorClass:"invalid", //指定错误提示的css类名,可以自定义错误提示的样式 默认:"error"
// highlight:'error', //可以给未通过验证的元素加效果,闪烁等
success:"valid",
submitHandler:function() { alert("Submitted!") },//要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
submitHandler:function(form) {
$(form).ajaxSubmit();
},
rules: { //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
email: { //rule里面的东西可以写在input标签里面，也可以写在这里；
required:true,
email: true,
minlength:6
},
password: {
required: true
}
},
messages: { //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
email: {
required:"用户名为必填",
minlength:"用户名至少6个字符",
email:"请填写正确有效的邮箱"
},
password:{
required:"密码不能为空",
minlength:"密码不能小于6位数"
}
}
})
})
</script>
</body>
</html>
4225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
