<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单验证插件Test</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>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form class="commentForm" id="commentForm" method="get" action="">
<p>
<label for="linkManName">名字</label>
<input id="linkManName" name="linkManName" type="text">
</p>
<p>
<label for="linkManEmal">邮箱</label>
<input id="linkManEmal" name="linkManEmal" type="text">
</p>
<p>
<label for="postMeil">邮局邮编</label>
<input id="postMeil" name="postMeil" type="text">
</p>
</form>
<div>
<p id ="addBtn">点击提交</p>
<p id="resetBtn">点击重新验证</p>
</div>
<script>
// 邮政编码验证 （自定义的验证规则）
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
//表单验证
$("#commentForm").validate({
rules: {
linkManName: {
required: true,
},
linkManEmal: {
required: true,
email:true
},
postMeil: {
required: true,
isZipCode:true
}
},
messages: {
linkManName: {
required: "联系人姓名必填",
},
linkManEmal: {
required: "联系人邮箱必填",
email:"邮箱需包含@"
},
postMeil: {
required: "邮政编码必填",
isZipCode:"请填写正确的邮编"
}
}
});
$("#addBtn").click(function(){
if (!$("#commentForm").valid()) {
return ;
}
alert("可以提交了")
})
// 点击重新验证（例如点击model框开始按钮的时候）
$("#resetBtn").click(function(){
$("#commentForm label.error").remove();//清除验证标签
$("#commentForm").validate().resetForm(); //清除验证
})
</script>
</body>
</html>
2199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
