下面是关于“jQuery.Validate 使用笔记(jQuery Validation范例 )”的完整攻略。
简介
jQuery.Validate是一个轻量级jQuery插件，它的作用是提供表单验证的前端逻辑，可以很方便地实现表单数据的自动验证。
安装
可以从jQuery.Validate官网https://jqueryvalidation.org/下载最新的版本。也可以通过CDN的方式来获取：
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
请注意：additional-methods.min.js是一个可选的文件，它提供了一些额外的验证方法。
使用
1. 创建HTML表单
首先需要创建一个HTML表单，并添加相应的input元素，例如：
<form id="myform">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br>
<label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password"><br>
<input type="submit" value="Submit">
</form>
2. 编写jQuery.Validate代码
然后，我们需要编写验证逻辑的代码。下面示例中，我们为表单中的每个元素都添加了一个验证规则。
<script>
$(document).ready(function () {
$("#myform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email",
email: "Please enter a valid email address"
},
password: {
required: "Please enter a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please enter a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
}
}
});
});
</script>
3. 提交表单并进行验证
最后，在提交表单时，我们需要调用验证逻辑来进行前端验证。如果验证通过，表单将会被正常提交。如果验证不通过，提示会自动显示。
<script>
$(document).ready(function () {
$("#myform").validate({
// 在这里添加验证规则和提示信息
});
$("#myform").submit(function (event) {
if ($("#myform").valid()) {
// 表单数据通过验证，可以进行提交
return true;
} else {
// 表单数据不通过验证，不进行提交
return false;
}
});
});
</script>
下面是一个完整的示例代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>
$(document).ready(function () {
$("#myform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email",
email: "Please enter a valid email address"
},
password: {
required: "Please enter a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please enter a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
}
}
});
$("#myform").submit(function (event) {
if ($("#myform").valid()) {
alert("Validation passed, form submitted!"); // 表单数据通过验证，可以进行提交
return true;
} else {
alert("Validation failed, form not submitted!"); // 表单数据不通过验证，不进行提交
return false;
}
});
});
</script>
</head>
<body>
<form id="myform">
<label for="name">Name</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br>
<label for="confirm_password">Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
示例说明
示例1：自定义验证方法
一些特别的验证方法没有被jQuery.Validate自带，但是我们可以通过自定义方法来实现。下面是一个例子，验证输入的值是否为“foo”。
<script>
$(document).ready(function () {
$.validator.addMethod("customRule", function (value, element) {
return this.optional(element) || /foo/.test(value);
}, "Please enter the value \"foo\"");
$("#myform").validate({
rules: {
field: {
customRule: true
}
}
});
});
</script>
示例2：动态修改验证规则
有时候，我们需要根据表单中的其他数据动态地改变验证规则。下面的例子中，选择框的选项决定了输入框的验证规则。
<script>
$(document).ready(function () {
$("#interests").change(function () {
var value = $(this).val();
if (value === "books") {
$("#comments").rules("add", {
required: true,
minlength: 50
});
} else {
$("#comments").rules("remove", "required minlength");
}
});
$("#myform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
comments: {
required: true
}
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email",
email: "Please enter a valid email address"
},
comments: "Please enter a message"
}
});
});
</script>
在这个例子中，我们在选择框的change事件处理程序中修改了“comments”输入框的规则。如果选择的是“books”，则该输入框需要包含至少50个字符（通过minlength规则），否则如果选择了其他选项，则不需要满足该规则（通过remove方法移除该规则）。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery.Validate 使用笔记(jQuery Validation范例 ) - Python技术站
微信扫一扫 
支付宝扫一扫 