jQuery Validation 实现表单验证
2019-01-27 本文已影响0人
索伦x
jQuery Validation 实现表单验证
普通示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="" role="form">
<fieldset>
<legend>用户注册信息填写</legend>
<p>
<label for="cname">用户名:</label>
<input id="cname" name="cname" minlength="2" type="text" required>
</p>
<p>
<input class="submit" id="signBtn" type="button" value="注册">
</p>
</fieldset>
</form>
<script>
$(function() {
//表单验证
$("#commentForm").validate({
rules: {
cname: {
required: true,
minlength: 5,
},
},
messages: {
cname: {
required: "请输入用户名",
minlength: "用户名不能小于 5 个字母"
},
}
});
} );
$("#signBtn").click(function () {
if($("#commentForm").valid()) return;
});
</script>
</body>
</html>
修改错误显示样式
<style>
input.error {
border: 1px solid red !important;
}
label.error {
/*background:url("../images/unchecked.gif") no-repeat 0px 0px;*/
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: red;
font-size: x-small;
}
</style>
远程验证：用户名是否已存在
$("#userRegist").validate({
rules: {
username: {
required: true,
minlength: 2,
//异步验证 开始
remote: {
url: "/username.json",//发送请求的url地址
type: "post", //请求方式
dataType: "json",//接收的数据类型
data: {
username: function () {
return $("#username").val();
}
},
dataFilter: function (data, type) { //过滤返回结果
if (data == "true")
return true; //true代表用户名还未存在
else
return false; //false代表用户名已经存在
}
}
//异步验证 结束
},
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成",
remote:"输入的用户名已经存在"
},
}
});
} );
Jquery Validate 验证规则
(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
