jQuery.validator.addMethod添加自定义的验证规则

addMethod:name, method, message

简单实例:单个验证的添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate.js拓展验证</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action="" method="get" id="tinyphp">
<input type="text" value="" name="isZipCode" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
// 添加验证规则
rules: {
isZipCode: { //验证邮箱
isZipCode: true
}
}
});
</script>
</body>
</html>

validate.expand.js

jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

 多个验证方法添加,请下载实例>>>>

=========================================================================

或看下面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate.js拓展验证</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.expand.js"></script>
</head>
<body>
<form action="" method="get" id="tinyphp">
邮编:<input type="text" value="" name="isZipCode" /><br /><br /> 名字:<input type="text" value="" name="userName" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
// 添加验证规则
rules: {
isZipCode: { //验证邮箱
isZipCode: true
},
userName:{
required: true,
userName: true,
rangelength: [5,10]
}
}, //重设提示信息,可省略
messages:{
userName: {
required: "请填写用户名",
rangelength: "用户名必须在5-10个字符之间"
} }
});
</script>
</body>
</html>

validate.expand.js

jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名必须在5-10个字符之间"); jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

jQuery:validate添加自定义验证的更多相关文章

  1. 封装jQuery Validate扩展验证方法

    一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  2. jquery validate remote验证唯一性

    jquery.validate.js 的 remote 后台验证 之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这 ...

  3. jquery validate扩展验证方法

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  4. 扩展jquery.validate自定义验证,自定义提示,本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  5. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

  6. jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  7. 使用tooltip显示jquery.validate.unobtrusive验证信息

    通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...

  8. jQuery Validate Ajax 验证

    jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...

  9. jQuery Validate扩展验证方法 (zhangxiaobin)

    /***************************************************************** jQuery Validate扩展验证方法 (zhangxiaob ...

随机推荐

  1. 15:django 缓存架构

    动态网站的一个基本权衡就是他们是动态的,每次一个用户请求一个页面,web服务器进行各种各样的计算-从数据库查询到模板渲染到业务逻辑-从而生成站点访问者看到的页面.从处理开销的角度来看,相比标准的从文件 ...

  2. sharding-jdbc 实现分表

    Sharding-JDBC 简介 Sharding-JDBC直接封装JDBC API,可以理解为增强版的JDBC驱动,旧代码迁移成本: 可适用于任何基于Java的ORM框架,如:JPA.HIberna ...

  3. How To Install Nginx on Ubuntu 16.04 zz

    Introduction Nginx is one of the most popular web servers in the world and is responsible for hostin ...

  4. 三:基于Storm的实时处理大数据的平台架构设计

    一:元数据管理器==>元数据管理器是系统平台的“大脑”,在任务调度中有着重要的作用[1]什么是元数据?--->中介数据,用于描述数据属性的数据.--->具体类型:描述数据结构,数据的 ...

  5. 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

  6. SQL Server 用链接服务器 同步SqlServer与MySQL

    =======================================================================================SQL SERVER链接S ...

  7. 02 java 基础:java 文件名与类名关系 CLASSPATH

    java 类修饰符:通常情况下使用 public 修饰,此时,java 强制要求 .java 文件名需与该 public 修饰类名一致,否则无法编译通过.如若没有加修饰符,文件名与类名可无任何关联. ...

  8. hdu多校6

    这个场要恶心死我了.. 1001 积分题,不要四舍五入 //#pragma comment(linker, "/stack:200000000") //#pragma GCC op ...

  9. linux在命令执行过程中ctrl +z 后[1]+ Stopped

    进程挂起 stopped 代表有进程挂起 [1]是id号 可以通过Linux命令:jobs 查看挂起进程 fg 1 把任务1放到前台 bg 1 把任务1放到后台

  10. 【ASP.NET MVC】HTML5+MVC上传文件显示进度

    head> <title>Index</title> <style type="text/css"> #statusBorder { po ...