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));
    }, "请正确填写您的邮政编码");
  • 相关阅读:
    day 40 MySQL之视图、触发器、事务、存储过程、函数
    js多元运算
    继承以及Super
    Git工作流指南:Gitflow工作流
    JS中的逻辑运算符&&、||,位运算符|,&
    js的prototype理解
    JS对象—数组总结(创建、属性、方法)
    React-Native中props用法详解
    AJAX中同步和异步的区别和使用场景
    web前端之性能
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3357633.html
Copyright © 2011-2022 走看看