本文介绍了一个使用jQuery Validation Plugin进行表单验证的实例，包括输入字段的必填检查、格式验证及自定义验证方法，展示了如何在提交前确保数据的有效性和一致性。
<!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">
<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>
<title>测试</title>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<label for="linkManName">Name (必需, 最小两个字母)</label>
<input id="linkManName" name="linkManName" minlength="2" type="text" required>
<p>
<label for="linkManEmal">E-Mail (必需)</label>
<input id="linkManEmal" type="email" name="linkManEmal" required>
</p>
</form>
<h1 id="submit">点击提交表单</h1>
<h1 id="resetValidation">点击提交表单</h1>
</body>
</html>
<script>
function checkName() {
var deferred = $.Deferred();//延迟方法
var Name = $("#name").val();
var Names = $("#names").val();
var Pid = $("#pNodeId").val();
var nodeId = $("#nodeId").val();
$.ajax({
type:"post",
url:"../Category/verifyName",
async:false,
data:{
Name:$("#name").val(),
Pid:$("#pNodeId").val(),
nodeId: $("#nodeId").val()
},
dataType: "html",
success: function(data, type) {
if(data=="ok"){
deferred.resolve();
}else{
deferred.reject();
}
}
});
//deferred.state()有3个状态:pending:还未结束,rejected:失败,resolved:成功
return deferred.state() == "resolved" ? true : false;
//return true;// 可以提交；
}
jQuery.validator.addMethod("valCheckName", function(value, element) {
return checkName();
},'邮箱名称已存在');
$(function(){
// 提交表单的时候验证；
$("#submit").click(function(){
if (!$("#commentForm").valid()) {
return;
}
alert("可以提交了")
});
$("#resetValidation").click(function(){
alert("重新验证！清除所有的错误");
$("#commentForm label.error").remove();//清除验证标签
$("#commentForm").validate().resetForm(); //清除验证
});
})
$("#commentForm").validate({
rules: {
linkManName: {
required: true,
},
linkManEmal: {
required: true,
email: true,
valCheckName:true
}
},
messages: {
linkManName: {
required: "联系人姓名必填",
},
linkManEmal: {
required: "邮箱必填",
email: "邮箱需包含@"
}
}
});
</script>
扫一扫
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
