• 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));
    }, "请正确填写您的邮政编码");
  • 相关阅读:
    拦截器
    git和bootstrap
    java面试题目
    Struts2笔记
    sql语句的面试题
    公司面试总结
    面试题12 包含 min 函数的栈 【栈】
    面试题11 字符串的排列[算法]
    [面试] 进程和线程的区别(面试题)
    [baidu] 面向对象的三个基本要素和五项基本设计原则
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3357633.html
Copyright © 2020-2023  润新知