【快速上手系列】jQuery—validate验证框架的简单使用及简单小案例教程
简单的学习了一些jQuery—validate验证框架的基础知识，有些地方可能不妥，只是学到的个人理解
准备
首先要导入jar包:
- 说明：
jquery-3.6.1.js：jquery框架（必须）jquery.validate.js：jquery验证框架（必须）messages_zh.js：将jquery验证框架中的默认提示变成中文（看个人需求，非必须）validate-methods.js：jquery自带验证方法扩展（必须但不完全必须，里面有一些基础的验证方法，自己有下面的自定义的也可以不用）additional-methods.js：用于自己自定义扩展验证方法（看个人需求，非必须）- 注意：必须顺序不要乱
<script type="text/javascript" src="js/jquery-3.6.1.js" ></script> <!-- 引入jquery框架 -->
<script type="text/javascript" src="js/jquery.validate.js" ></script> <!-- 引入jquery验证框架 -->
<script type="text/javascript" src="js/messages_zh.js" ></script> <!-- 用于jquery验证框架默认提示变成中文，类似一个语言补丁 -->
<script type="text/javascript" src="js/validate-methods.js" ></script> <!-- jquery自带验证方法扩展 -->
<script type="text/javascript" src="js/additional-methods.js"></script> <!-- 用于自己自定义验证方法 -->
解释
1.messages_zh.js文件中有默认的验证提示信息，可改可不改，但不推荐（尤其需要验证的页面多，全局默认提示都改了可能不方便）
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
2.additional-methods.js：用于自己自定义扩展验证方法，去网上随便找了一些常用的可以简单参考一下
//自己用于扩展的验证方法
$(function(){
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");
// 电话号码验证
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");
// 邮政编码验证
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");
// QQ号码验证
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");
});
具体使用
form表单
在菜鸟教程里简单搞了一个基础的form表单
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" type="text">
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email">
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="text" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment"></textarea>
</p>
<p>
<label for="cname">电话</label>
<input id="mobile" name="mobile" type="text">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
js代码
1.用于提交事件
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
2.规则和提示信息
$().ready(function() {
// onfocusout:false,
// onsubmit:false,
$("#commentForm").validate({
//给验证设置样式
errorClass: "error", //错误时css样式
validClass:"success", //正确时css样式
errorElement: "span", //错误设置元素为span（设置啥标签都行，自己看着办）
//验证成功样式
success: function(label) {
//label指向上面那个错误提示信息标签span
label.text("正确") //清空错误提示消息
.addClass("success"); //加上自定义的success类
},
//设置验证规则
rules: {
name: "required",
email: "required",
comment: "required",
name: {
required: true,
minlength: 2
},
url: {
url:true
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 2
},
mobile: {
mobile: true
},
agree: "required"
},
//设置验证规则的信息提示
messages: {
name: {
required: "请输入用户名",
minlength: "用户名必需由两个字符组成"
},
url: {
url:"输入的url格式不正确..."
},
email:{
required:"邮箱是必须要填的！",
email:"请输入一个正确的邮箱"
},
comment:{
required:"备注也是必须要填的！",
minlength:"最小要写两个字符"
}
}
})
});
完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的jquery验证表单</title>
<style>
span.error {
color: red;
}
span.success {
color: green;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.1.js" ></script> <!-- 引入jquery框架 -->
<script type="text/javascript" src="js/jquery.validate.js" ></script> <!-- 引入jquery验证框架 -->
<script type="text/javascript" src="js/messages_zh.js" ></script> <!-- 用于jquery验证框架默认提示变成中文，类似一个语言补丁 -->
<script type="text/javascript" src="js/validate-methods.js" ></script> <!-- jquery自带验证方法扩展 -->
<script type="text/javascript" src="js/additional-methods.js"></script> <!-- 用于自己自定义验证方法 -->
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" type="text">
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email">
</p>
<p>
<label for="curl">URL (可选)</label>
<input id="curl" type="text" name="url">
</p>
<p>
<label for="ccomment">备注 (必需)</label>
<textarea id="ccomment" name="comment"></textarea>
</p>
<p>
<label for="mobile">电话</label>
<input id="mobile" name="mobile">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
<script>
$.validator.setDefaults({
//debug: true, //调试模式取消submit的默认提交功能
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// onfocusout:false,
// onsubmit:false,
$("#commentForm").validate({
//给验证设置样式
errorClass: "error", //错误时css样式
validClass:"success", //正确时css样式
errorElement: "span", //错误设置元素为span（设置啥标签都行，自己看着办）
//验证成功样式
success: function(label) {
//label指向上面那个错误提示信息标签span
label.text("正确") //清空错误提示消息
.addClass("success"); //加上自定义的success类
},
//设置验证规则
rules: {
name: "required",
email: "required",
comment: "required",
name: {
required: true,
minlength: 2
},
url: {
url:true
},
// password: {
// required: true,
// minlength: 5
// },
// confirm_password: {
// required: true,
// minlength: 5,
// equalTo: "#password" //是否等于原来的密码
// },
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 2
},
mobile: {
mobile: true
},
agree: "required"
},
//设置验证规则的信息提示
messages: {
// firstname: "请输入您的名字",
// lastname: "请输入您的姓氏",
name: {
required: "请输入用户名",
minlength: "用户名必需由两个字符组成"
},
url: {
url:"输入的url格式不正确..."
},
// password: {
// required: "请输入密码",
// minlength: "密码长度不能小于 5 个字符"
// },
// confirm_password: {
// required: "请输入密码",
// minlength: "密码长度不能小于 5 个字符",
// equalTo: "两次密码输入不一致"
// },
email:{
required:"邮箱是必须要填的！",
email:"请输入一个正确的邮箱"
},
comment:{
required:"备注也是必须要填的！",
minlength:"最小要写两个字符"
}
// agree: "请接受我们的声明",
// topic: "请选择两个主题"
}
})
});
</script>
</body>
</html>
效果图
7134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
