zoukankan      html  css  js  c++  java
  • 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-uFFE5w]+$/.test(value);
    }, "用户名必须在5-10个字符之间");   
    
    jQuery.validator.addMethod("isZipCode", function(value, element) {   
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");
  • 相关阅读:
    Mysql之存储过程与存储函数
    mysql-bin日志自动清理及手动删除
    mysql下面的binlog
    mysql下的数据备份与恢复
    查询mysql数据库中各个表所占空间大小以及索引大小
    mysql执行sql语句报错this is incompatible with sql_mode=only_full_group_by
    docker WARNING: IPv4 forwarding is disabled. 解决方法
    Linux平台修改环境变量的方式
    PuTsangTo
    (一) 从Angular1到Angular2的杂谈
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3357633.html
Copyright © 2011-2022 走看看