zoukankan      html  css  js  c++  java
  • 给大家推荐一款非常好用的表单验证插件:lr-verify.js

    废话不说,直接上代码说明,1分钟学会:

    例:
    
    1.验证配置
    $.extend(Verify.types, {
            "must" : {
                "verify" : function(elem) {
                    if (elem.value == "") {
                        return "此处为必填项";
                    } else {
                        return true;
                    }
                }
            },
            "num" : {
                "verify" : function(elem) {
                    value = elem.value.trim();
                    if (value  && isNaN(value)) {
                        return "此处只能填写数字";
                    } else {
                        if(value<this.min||value>this.max){
                        ..........
                        }
                        return true;
                    }
                }
            }
    });
    
    
    
    2.提示消息配置
    //关闭提示信息,可以自己实现
    Verify.my.closePrompt=function(e){//e:验证的元素,
         
    }
    
    //提示验证信息,可以自己实现
    Verify.my.openPrompt=function(e,msg){//e:验证的元素
       alert(msg);
    }
    
    
    3.操作事件,提示信息html 等相关配置
    Verify.conf.verifyEventsName=["keyup","focus"];//执行验证的事件,可以根据实际情况配置,如click
    Verify.conf.closePromptEventsName=["blur"];//关闭提示信息的事件,可以根据实际情况配置,如click
    Verify.conf.promptHtml="<div class="lrvf-prom-point">"//提示信息html
        + "<div class="lrvf-prom-box" ></div>"
        + "<span class="info"></span>" + "</div>";
    
    
    4.html使用配置:
    //使用验证(must:必须是有配置过的)
    <input type="text"  verify="must" >
    //使用多个验证(must和num:必须是有配置过的)
    <input type="text"  verify="must,num" >
    //使用验证,并且自定义属性
    <input type="text"  verify="must,num:{max:100,min:10}" >
    
    5.函数
    /* 手动执行 验证 ,e:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者js对象 ), 
     isPrompt:是否 提示验证 信息,返回验证不通过的元素和提示信息 [{"elem": elemnt,"msg": "xxx"}]
     */
    Verify.doVerify(e,isPrompt)
    
    //手动提示,es:要验证的 元素(js对象 ),msg:提示 信息
    Verify.openPrompt(e,msg)
    
    //手动关闭提示 ,e:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
    Verify.closePrompt(e)
    
    //手动移除验证元素 ,elems:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
    Verify.remove(elems)
    
    //手动新增验证元素 ,elems:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
    Verify.add(elems)

    插件地址:https://gitee.com/lijinlin_index/source

    如有疑问请联系QQ:594255598






  • 相关阅读:
    新能源汽车三大核心技术
    新能源汽车分类解读
    hadoop(四):配置参数
    HDP2.4安装(六):小结与回顾
    【Web】Nginx配置开机启动
    【Linux】ODBC安装
    【Erlang】源码安装
    【Linux】 Ncures库的介绍与安装
    【RabbitMQ】 RabbitMQ安装
    《MinDoc 接口文档在线管理系统》
  • 原文地址:https://www.cnblogs.com/abab/p/9725098.html
Copyright © 2011-2022 走看看