jquery validate添加自定义验证规则(验证邮箱 邮政编码)

jQuery：validate添加自定义验证

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));
}, "请正确填写您的邮政编码");

赞 (0)

相关推荐

  • jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • Jquery Validate 正则表达式实用验证代码大全

    手机号码验证 以下为引用内容: 复制代码 代码如下: 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(valu

  • 解决FCKEditor在IE10、IE11下的不兼容问题

    解决FCKEditor在IE10、IE11下的不兼容问题

    第一种方法.浏览器设置兼容模式 打开IE,点击"工具"菜单,选择"兼容性视图设置",勾选"在兼容性视图中显示所有网站"选项即可. 第二种方法.在使用编辑器的网页的: <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 下面加 <meta http-equiv="X-UA-Compatible"

  • CKEditor无法验证的解决方案（js验证+jQuery Validate验证）

    最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的. 前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意. 不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素

  • asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法

    asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法

    弄了半天也没有找到原因,然后又重新到网上下载几个,还是不行,郁闷坏了,最后结合其他编辑器的用法,才知道是配置文件夹中上传文件夹的路径写错了 比如要上传到项目的根目录下的UserFiles下面,web.config的配置如下: 复制代码 代码如下: <appSettings> <add key="FCKeditor:BasePath" value="~/FCKeditor" /> <add key="FCKeditor:User

  • jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库1.下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载 默认校验规则 复制代码 代码如下: (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.php验证输入值(3)email:true                  必须输入正确格式的电子邮件(4)url:true          

  • ckeditor的使用和配置方法分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • JQuery扩展插件Validate—6 radio、checkbox、select的验证

    JQuery扩展插件Validate—6 radio、checkbox、select的验证

    效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

随机推荐