jquery Validata验证框架的详解
首先导入js库
<script src="jquery.validation/jquery-1.9.1.js"></script>
<script src="jquery.validation/jquery.validate.min.js"></script>
1.validate(options)是运行form表单的开始，他是用来验证你所选的form，以上代码的第五行“#myForm"是form的id名。
2.rules() 是校验规则他就是validate里的options,是用户定义的键/值对规则。键为一个表单元素的 name属性、值为一个简单的字符串或者由规则/参数对组成的一个对象。
3. messages ()是用户自定义的 键/值 对消息===键为一个表单元素的name属性，值为该表单元素将要显示的消息。
默认的校验规则
(1).required:true ---必须要填写的字段
(2).remote:"remote-valid.jsp" ---使用ajax方法调用remote-valid.jsp验证输入值
(3).email:true ---必须输入正确格式的电子邮件
(4).url:true ---必须输入正确格式的网址
(5).date:true ---必须输入争取格式的日期，日期校验ie6出错，慎用
(6).dateISO:true ---必须输入正确格式的日期（例如：2017-06-20, 2017/06/20）只验证格式，不验证有效性
(7).number:true ---必须输入合法的数字（负数，小数）
(8).digits:true ---必须输入整数
(9).creditcard:true ---必须输入合法的信用卡号
(10).equalTo:"#password" ---输入值必须和#password相同
(11).accept： --- 输入拥有合法的后缀名的字符串（上传文件的后缀）
(12).maxlength:5 ---输入长度最多的是5的字符串（汉字算一个字符）
(13).minlength:10 ---输入长度最小的是10的字符串（汉字算一个字符）
(14).ranglength:[5.10] ---输入的长度必须介于 5 和 10 之间的字符串（汉字算一个字符）
(15).range:[5,10] ---输入值必须介于 5 和 10 之间
(16).max:5 ---输入值不能大于5
(17).min:10 ---输入值不能小于10
其用法为：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#img {
display: none;
30px;
height: 30px;
}
</style>
<script src="jquery.validation/jquery-1.9.1.js"></script>
<script src="jquery.validation/jquery.validate.min.js"></script>
<script src="js/ajax1.js"></script>
<script>
$(function() {
var oLgn = $("#lgn");
var oReg = $("#reg");
var oImg = $("#img");
var oSpan = $("#span");
var oUser = $("#user");
var oPass = $("#pass");
$('#demoForm').validate({
rules: {
//用户名
username: {
required: true,
rangelength: [6, 11]
},
//密码
password: {
required: true,
rangelength: [11, 13]
},
},
messages: {
//用户名
username: {
required: '此项必填',
rangelength: '用户名长度为6-11位'
},
//密码
password: {
required: '此项必填',
rangelength: '用户名长度为11-13位'
}
},
submitHandler: function() {
oLgn.on('click', function() {
myAjax('user.php', "lgn", oUser.val(), oPass.val());
});
oReg.on('click', function() {
myAjax('user.php', "add", oUser.val(), oPass.val());
})
//myAjax('user.php',"lgn",oUser.val(),oPass.val());
function myAjax(url, act, userValue, passValue) {
$.ajax({
url: url,
data: {
act: act,
user: userValue,
pass: passValue
},
beforeSend: function() {
oImg.css("display", "block")
},
success: function(res) {
var json = eval('(' + res + ')');
oSpan.html(json.msg);
},
complete: function() {
oImg.css("display", "none")
}
})
}
},
});
});
</script>
</head>
<body>
<form action="" id="demoForm">
<p>
<label for="user">username:</label>
<input type="text" name="username" id="user" />
</p>
<p>
<label for="pass">password:</label>
<input type="text" name="password" id="pass" />
</p>
<p><input type="submit" value="登录" id="lgn" />
<input type="submit" value="注册" id="reg" /></p>
<img src="loading.jpg" alt="" id="img" />
<span id="span"></span>
</form>
</body>
</html>
希望以上内容会对大家有所帮助！！！