jQuery Validate 学习笔记
什么是 jQuery Validate
jQuery Validate 是一个基于 jQuery 的表单验证插件。它能够让你快速方便地对表单进行各种验证，包括必填、长度、格式、范围等等。
如何使用 jQuery Validate
首先需要在页面中引入 jQuery 和 jQuery Validate 的 js 文件：
htmlCopy Code<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
然后我们可以通过以下 JS 代码来初始化一个表单验证器：
javascriptCopy Code$(document).ready(function() {
$("#myform").validate({
// 验证规则和提示信息
rules: {
username: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
username: {
required: "用户名不能为空",
minlength: "用户名至少为 5 个字符"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
password: {
required: "密码不能为空",
minlength: "密码至少为 6 个字符"
},
confirm_password: {
required: "确认密码不能为空",
minlength: "确认密码至少为 6 个字符",
equalTo: "两次密码输入不一致"
}
}
});
});
在上述代码中，我们定义了一个 rules 对象，其中包含了各个表单元素的验证规则，比如 required 表示必填项，minlength 表示最小长度。messages 对象则是针对每个表单元素定义的提示信息。
实例
接下来，我们提供一个简单的实例来演示 jQuery Validate 的使用。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Validate 实例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="myform" method="post">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="email">邮箱：</label>
<input type="text" name="email" id="email"><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br>
<label for="confirm_password">确认密码：</label>
<input type="password" name="confirm_password" id="confirm_password"><br>
<input type="submit" value="提交">
</form>
<script>
$(document).ready(function() {
$("#myform").validate({
rules: {
username: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
username: {
required: "用户名不能为空",
minlength: "用户名至少为 5 个字符"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
password: {
required: "密码不能为空",
minlength: "密码至少为 6 个字符"
},
confirm_password: {
required: "确认密码不能为空",
minlength: "确认密码至少为 6 个字符",
equalTo: "两次密码输入不一致"
}
}
});
});
</script>
</body>
</html>
在上述代码中，我们定义了一个表单，其中包含了用户名、邮箱、密码和确认密码四个表单元素。在 JS 代码中，我们通过 $("#myform").validate() 初始化了表单验证器，并指定了各个表单元素的验证规则和提示信息。
当表单提交时，如果有任何一个表单元素的验证不通过，则会弹出相应的提示信息，阻止表单的提交。如果所有表单元素的验证都通过，则表单会被提交到指定的地址。