JQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
使用JQuery Validate之前首先引入以下两个文件：jquery-1.11.1.js 和 jquery.validate.js。下载链接：https://jqueryvalidation.org。
菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
直接上实例，html代码如下：
<div id="form_con">
<form class="cmxform" id="myform" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>验证密码</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>时间</td>
<td><input type="date" name="time" /></td>
<td></td>
</tr>
<tr>
<td>个人网页</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>电话</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody>
</table>
</form>
</div>
新建一个validated.js文件用于验证以上表单数据：
$(function(){
var validator = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
errorClass: "haha", //默认为错误的样式类为：error
focusInvalid: false,
focusCleanup: true,
onkeyup: false,
errorElement: "span",
submitHandler: function(form) { //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(function()
{
return false;
}); //提交表单
},
rules: { //定义验证规则,其中属性名为表单的name属性
username: {
required: true,
minlength: 2,
remote: {
url: "js/test.txt", //后台处理程序
type: "get", //数据发送方式
//dataType: "text", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
}
//response.getwrite().write("true")
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6, 8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0, 120]
},
email: {
required: true,
email: true
},
telephone:{
required:true,
isTelephone:true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: { //自定义验证消息
username: {
required: "用户名是必需的！",
minlength: $.validator.format("用户名至少要{0}个字符！"),
remote: $.validator.format("{0}已经被占用")
},
firstpwd: {
required: "密码是必需的！",
rangelength: $.validator.format("密码要在{0}-{1}个字符之间！")
},
secondpwd: {
required: "密码验证是必需的！",
equalTo: "密码验证需要与密码一致"
},
sex: {
required: "性别是必需的"
},
age: {
required: "年龄是必需的",
range: "年龄必须介于{0}-{1}之间"
},
email: {
required: "邮箱是必需的！",
email: "请输入正确的邮箱地址（例如 [email protected]）"
},
telephone:{
required: "手机号码是必需的！"
},
purl: {
required: "个人主页是必需的",
url: "请输入正确的url格式,如 http://www.domainname.com"
},
afile: {
required: "附件是必需的！",
accept: "只接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) { //验证消息放置的地方
error.appendTo(element.parent("td").next("td"));
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
/*,
errorContainer: "#error_con", //验证消息集中放置的容器
errorLabelContainer: "#error_con ul", //存放消息无序列表的容器
wrapper: "li", //将验证消息用无序列表包围
validClass: "valid", //通过验证的样式类
errorElement: "span", //验证标签的名称，默认为：label
success: "valid" //验证通过的样式类
*/
});
// 手机号码验证
jQuery.validator.addMethod("isTelephone", function(value, element) {
var tel = /^1[358][0-9]{9}$/;
return tel.test(value);
}, "请正确填写您的手机号码");
$("button").click(function() {
validator.resetForm();
});
});
注意：
1.username属性是通过远程验证的，通过remote连接后台程序进行验证。代码如下：
remote: {
url: "js/test.txt", //后台处理程序
type: "get", //数据发送方式
//dataType: "text", //接受数据格式
data: { //要传递的数据
username: function() {
return $("#username").val();
}
}
2.telephone元素的验证是自定义添加的方法，代码如下：
// 手机号码验证
jQuery.validator.addMethod("isTelephone", function(value, element) {
var tel = /^1[358][0-9]{9}$/;
return tel.test(value);
}, "请正确填写您的手机号码");
addmethod里面有三个参数：name function message。 方法名称 调用方法 提示信息。
3.设置提示信息的地方：
errorPlacement: function(error, element) { //验证消息放置的地方
error.appendTo(element.parent("td").next("td"));
},
可将常用的验证方法收集好，写成一个js文件，一般写在 additional-methods.js 文件中，方便以后自己代码调用。未完待续。。。
时间： 2024-12-10 07:12:21