步骤1：导入封装后自定义验证方法-validate-methods.js
$(function(){
// 判断整数value是否等于0
jQuery.validator.addMethod("isIntEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value==0;
}, "整数必须为0");
// 判断整数value是否大于0
jQuery.validator.addMethod("isIntGtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>0;
}, "整数必须大于0");
// 判断整数value是否大于或等于0
jQuery.validator.addMethod("isIntGteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value>=0;
}, "整数必须大于或等于0");
// 判断整数value是否不等于0
jQuery.validator.addMethod("isIntNEqZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value!=0;
}, "整数必须不等于0");
// 判断整数value是否小于0
jQuery.validator.addMethod("isIntLtZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<0;
}, "整数必须小于0");
// 判断整数value是否小于或等于0
jQuery.validator.addMethod("isIntLteZero", function(value, element) {
value=parseInt(value);
return this.optional(element) || value<=0;
}, "整数必须小于或等于0");
// 判断浮点数value是否等于0
jQuery.validator.addMethod("isFloatEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value==0;
}, "浮点数必须为0");
// 判断浮点数value是否大于0
jQuery.validator.addMethod("isFloatGtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>0;
}, "浮点数必须大于0");
// 判断浮点数value是否大于或等于0
jQuery.validator.addMethod("isFloatGteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value>=0;
}, "浮点数必须大于或等于0");
// 判断浮点数value是否不等于0
jQuery.validator.addMethod("isFloatNEqZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value!=0;
}, "浮点数必须不等于0");
// 判断浮点数value是否小于0
jQuery.validator.addMethod("isFloatLtZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<0;
}, "浮点数必须小于0");
// 判断浮点数value是否小于或等于0
jQuery.validator.addMethod("isFloatLteZero", function(value, element) {
value=parseFloat(value);
return this.optional(element) || value<=0;
}, "浮点数必须小于或等于0");
// 判断浮点型
jQuery.validator.addMethod("isFloat", function(value, element) {
return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "只能包含数字、小数点等字符");
// 匹配integer
jQuery.validator.addMethod("isInteger", function(value, element) {
return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value)>=0);
}, "匹配integer");
// 判断数值类型，包括整数和浮点数
jQuery.validator.addMethod("isNumber", function(value, element) {
return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "匹配数值类型，包括整数和浮点数");
// 只能输入[0-9]数字
jQuery.validator.addMethod("isDigits", function(value, element) {
return this.optional(element) || /^\d+$/.test(value);
}, "只能输入0-9数字");
// 判断中文字符
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "只能包含中文字符。");
// 判断英文字符
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "只能包含英文字符。");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码。");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isTel", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value));
}, "请正确填写您的联系方式");
// 匹配qq
jQuery.validator.addMethod("isQq", function(value, element) {
return this.optional(element) || /^[1-9]\d{4,12}$/;
}, "匹配QQ");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码。");
// 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
jQuery.validator.addMethod("isPwd", function(value, element) {
return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value);
}, "以字母开头，长度在6-12之间，只能包含字符、数字和下划线。");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
//var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
return this.optional(element) || isIdCardNo(value);
}, "请输入正确的身份证号码。");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
}, "请填写正确的IP地址。");
// 字符验证，只能包含中文、英文、数字、下划线等字符。
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、数字、下划线等字符");
// 匹配english
jQuery.validator.addMethod("isEnglish", function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "匹配english");
// 匹配汉字
jQuery.validator.addMethod("isChinese", function(value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "匹配汉字");
// 匹配中文(包括汉字和字符)
jQuery.validator.addMethod("isChineseChar", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "匹配中文(包括汉字和字符) ");
// 判断是否为合法字符(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function(value, element) {
return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
}, "判断是否为合法字符(a-zA-Z0-9-_)");
// 判断是否包含中英文特殊字符，除英文"-_"字符外
jQuery.validator.addMethod("isContainsSpecialChar", function(value, element) {
var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\！)(\@)(\#)(\￥)(\%)(\…)(\&)(\*)(\（)(\）)(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\；)(\：)(\”)(\“)(\’)(\。)(\，)(\、)(\？)]+/);
return this.optional(element) || !reg.test(value);
}, "含有中英文特殊字符");
//身份证号码的验证规则
function isIdCardNo(num){
//if (isNaN(num)) {alert("输入的不是数字！"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/);
else {
//alert("输入的数字位数不对。");
return false;
}
var a = num.match(re);
if (a != null)
{
if (len==15)
{
var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
else
{
var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
}
if (!B) {
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对。");
return false;
}
}
if(!re.test(num)){
//alert("身份证最后一位只能是数字和字母。");
return false;
}
return true;
}
});
步骤2：创建jsp页面，并导入封装js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Validate扩展验证方法</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script>
<script type="text/javascript">
$(function(){
var validate = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(); //提交表单
},
rules:{
zero:{
//isIntEqZero:true
//isFloat:true
//isInteger:true
//isNumber:true
//isMobile:true
//isPhone:true
//isTel:true
//isIdCardNo:true
//isRightfulString:true
isContainsSpecialChar:true
}
},
//如果验证控件没有message，将调用默认的信息
messages:{
zero:{
//isIntEqZero:"请输入0"
//isFloat:"请输入浮点数"
//isInteger:"请输入整数"
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="zero">输入框：</label>
<!-- id和name最好同时写上 -->
<input id="zero" name="zero" />
</p>
<p>
<input class="submit" type="submit" value="验证" />
</p>
</form>
</body>
</html>
相关推荐
jQuery 是一个高效、简洁而易用的 JavaScript 库，它封装了HTML DOM操作、事件处理、动画设计和Ajax交互。它的目标是使JavaScript编程变得更加简单。`jquery-1.11.1.min.js` 是jQuery的1.11.1版本的压缩版，用于在...
在你提供的标题“extend jQuery validate myValidate 表单验证”中，我们可以推测你可能在尝试扩展默认的jQuery Validate功能，创建一个名为"myValidate"的自定义验证方法。扩展jQuery Validate库是常见的需求，以便...
"对remote方法进行封装增强"这部分，意味着在原生的`jQuery Validate`基础上，开发者可能进行了扩展，以增强远程验证功能。`remote`验证方法允许你将验证逻辑移到服务器端，通过Ajax请求来验证数据。这样做可以处理...
本项目"基于Bootstrap与jQuery-validate的个人封装检验框架demo"是一个很好的实践示例，展示了如何将这两个强大的库结合使用，以创建具有出色UI和用户体验的验证框架。 Bootstrap是由Twitter开发的一个开源前端框架...
基于Bootstrap与jQuery-validate的个人封装检验框架demo,拥有良好的UI与用户体验.博客地址：http://blog.csdn.net/u010506919/article/details/75137353
jQuery Validate插件是用于前端表单验证的JavaScript库，它提供了丰富的验证规则和方便的API，使得开发者可以轻松地实现对用户输入的验证。在“jquery.validate分组验证代码”这个场景中，我们关注的是如何分步验证...
该插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。
为解决这个问题，建议采用模块化或函数封装的方式来组织验证代码，提高代码的可维护性和可读性。 ### 示例项目 在`jqueryvalidationDemo`这个压缩包中，包含了一个使用jQuery Validation插件进行多表单、多按钮、...
2. **插件结构**：jQuery插件通常是封装好的函数，通过扩展jQuery对象来提供新的功能。它们通常遵循一定的结构，包括一个主函数，用来初始化设置，以及可能的辅助函数。 3. **气泡样式**：创建气泡提示涉及CSS设计...
例如，可以封装一个`loadData`函数用于通过AJAX从服务器获取数据，或者一个`validateForm`函数用于验证表单输入的有效性。这样，这些功能在项目中的任何地方都可以轻松调用，避免了重复编写相同的代码。 2. **静态...
在使用jQuery Validate进行表单验证时，通常我们会将验证规则直接注册在表单的匿名函数中，这样表单验证就会在用户提交表单时自动触发。然而，如果我们希望通过一个普通按钮来触发表单的验证，而不是使用默认的提交...
以下是对 `jQuery Validate` 的使用攻略，特别是关于自定义验证行为的详细说明： 1. **自定义表单提交**：你可以通过设置 `submitHandler` 选项来自定义表单提交行为。当表单通过验证后，`submitHandler` 回调函数...
这通常涉及封装特定功能，通过扩展jQuery对象的方法来实现。自定义插件可以让开发者更好地控制代码，满足个性化需求，同时保持代码的模块化和可维护性。 总结： jQuery 插件库极大地丰富了前端开发工具，使得开发者...
jQuery拥有庞大的插件生态系统，如jQuery UI提供丰富的用户界面组件，而jQuery Validate则是用于表单验证的强大工具。这些插件进一步扩展了jQuery的功能，满足了不同项目的需求。 8. **兼容性** jQuery 1.12.4...
6. **插件生态**：jQuery拥有丰富的插件生态系统，如jQuery UI、jQuery Validate等，它们为开发者提供了更多扩展功能，满足多样化的需求。 三、jQuery 1.10.2.min.js的版本意义 版本号1.10.2表明这是一个稳定版，...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作，而jQuery Validate插件则是jQuery的一个扩展，专门用于实现复杂的表单验证功能。本教程将深入探讨如何使用jQuery Validate插件来制作一个用户注册表单，涵盖...
7. **插件机制**：jQuery拥有强大的插件生态系统，如jQuery UI提供丰富的界面组件，而许多第三方插件如jQuery Validate用于表单验证，方便开发者扩展功能。 8. **版本差异**：jQuery 1.7相对于早期版本，可能包含了...