Skip to content

seajs validate.js(表单元素校验)

awei.yu edited this page Apr 9, 2016 · 1 revision

说明:用于表单元素校验

调用方式:

给form内的input标签增加对应的属性即可,如:

    <form>
        //手机验证码校验(利用基本校验类型:int 并组合相关属性)
        <input type="text" placeholder='短信验证码' validType="int" minLength="6" maxLength="6" errorTip="请输入正确的验证码"/>
        //手机号校验
        <input type="text" placeholder='请输入手机号' validType="phoneNum"/>
        //身份证号校验
        <input type="text" placeholder='请输入身份证号' validType="idCard"/>
  </form>

属性关键字:

    1.validType:
        num 整数或小数
        int 整数
        float 整数或小数(等同于num)
        phoneNum 手机号
        idCard 身份证
        bankCard 银行卡
    2.minNum:数字型的最小值(minNum="0":代表>=0;minNum="!0":代表>0)
    3.maxNum:数字型的最大值(maxNum="10":代表<=10;maxNum="!10":代表<10)
    4.maxLength:input内容的最大长度
    5.minLength:input内容的最小长度
    6.floatLength:小数位
    7.isEmpty:true 可为空(1204版本之后效果等同于minLength="0")
    8.errorTip:自定义错误提示
    9.firstZero:首位是否可为0(默认:true)
   10.noSpace:空格不计入字数(默认:false)
   11.isByte:是否按照字节来计字数(默认:false)
   12.focusOnError:校验未通过的表单元素是否自动获得焦点(默认:true)
   13.noBorder:校验未通过的表单元素去除红色警告框(默认:false)
   14.notTipNext:1204版本之后,错误提示的位置调整为距离上下元素4px,如果给提示信息下方元素设置上该属性,则插件会忽略该元素继续向下遍历元素(默认:false)
   15.forceValid:某些特殊的,比如input[type=checkbox]需要校验,但是其display='none'会导致插件忽略该元素,通过设置该属性为"true"可解决(默认:false)
   16.vIptWrapper:用于将input的父容器设置为下方出错提示的参照物(出错提示将出现在该元素的下方),效果等同于在该元素的class中添加类"vic"(不推荐)
   17.vMyWrapper:用于无法通过关键字16为input设置容器的情况,直接给该input标签添加该属性,值等于目标容器id
   18.noErrorBorder:效果等同于关键字13,但目前推荐使用该关键字
   19.noErrorTip:不显示出错提示(默认:false)
   20.vpopzindex:气泡提示.style.zIndex

api:

    showErrorTip(tip):
        说明:用于直接给某个输入框制造错误提示 一般用于本校验无法满足需求时,外部的自定义校验调用该方法来保持错误提示的统一,该方法已集成在页面所有表单输入框内
        参数说明:
            tip(string):提示内容
        示例:
           document.getElementById("ipt").showErrorTip("请输入正确的文字"); //id为ipt的输入框出现错误提示
    [input/textarea/select].validMe(onlyValide):
        说明:用于单独校验某个输入框 一般用于同一个form表单内实现某个功能需要对指定的输入框进行校验的操作。如:提交手机号和验证码的form表单,其中还有获取验证码的按钮,获取验证码按钮就需要单独校验手机号输入框该,该方法已集成在页面所有表单输入框内
        参数说明:
                onlyValide(boolean):
                    true:表示仅校验该输入框是否符合校验规则,则该方法会直接返回true/false
                    false:该方法会返回一串json数据{"isok":true/false,"tip":"错误信息"}
        示例:
           document.getElementById("ipt").validMe(true); //对id为ipt的输入框进行校验 由于onlyValide=true,将只返回true/false
           document.getElementById("ipt").validMe(false); //对id为ipt的输入框进行校验 由于onlyValide=false,可从返回值中取得校验结果(isok),和错误提示(tip)
    setVal(value):
        说明:用于给表单输入框设置值,并能够响应本校验 只有通过该接口为input设置值才可清除错误提示,方法已集成在页面所有表单输入框内
        参数说明:
                value(string):值
        示例:
           document.getElementById("ipt").setVal("hello"); //为id为ipt的输入框设置值:"hello"
    setHTML(value):
        说明:一般用于select元素做级联添加的时候,能够响应本校验 若是通过innerHTML方式为select添加子元素,只有通过该接口才可清除错误提示,方法已集成在页面所有表单输入框内
        参数说明:
                value(string):值
        示例:
                [select].setHTML("<option>1</option>");
    [form].validMe():
        说明:用于校验整个form表单内的所有输入框,该方法已集成在页面所有form标签内
        示例:
           document.getElementById("fm").validMe(); //对id为fm的整个form进行校验 返回true/false
    [input/textarea/select].addIptEvt(fuc):
        说明:用于给输入框绑定input事件。该方法绑定的事件触发总是会在表单清除错误之后。比如输入框a的校验没有通过,这时候a的状态是红色框并有错误提示,这个时候a还绑定了事件用于实时计算收益,且该事件会在a校验通过的情况话才会执行。这时候如果在输入框a中输入,首先触发的是计算收益,这时候由于上一次错误没有清除,validMe()会直接返回false。就可能会导致这次的计算不被触发。
        参数说明:
            fuc(Function):绑定函数
    [input/textarea/select].removeIptEvt(fuc):
        说明:用于清除通过addIptEvt给输入框绑定的事件。
    [input/textarea/select].setStyleAfterError(style):
        说明:插件默认会在输入的时候清除错误提示,也就是还原到错误提示之前的状态。如果在出错提示期间改变了输入框样式,请通过该api进行设置。
        示例:
        input.setStyleAfterError({
                color:"red",
                background-color:"black"      
        });
    插入自定义校验:
        [input/textarea/select].myValid=function(){
           .............
           return "提示内容";
         }
        返回内容即为出错的提示内容,如:
            function(){
                if(this.value!=document.getElementById("pw1").value){
                    return "两次密码输入不一致";
                }
            }
        如此即可,只需要关注校验失败的条件。
    checkbox校验:
        校验规则需通过插入自定义校验实现
        input[type='checkBox'].myValid=function(){
           if(!this.checked)return "请先勾选我"
       }
    form表单插入自定义校验:在所有表单元素校验通过之后,再进行的最后一道校验,此时的校验一般与表单元素内容无关
    [form].myValid=function(){
        return true/false;
    }
    返回值为boolean类型,以此决定是否校验通过
    afterShowErrorTip:
    说明:出现错误提示之后的回调,一般用于增加自定义出错样式
    示例:
    [input/textarea/select].afterShowErrorTip=function(){}
    afterClearErrorTip:
    说明:清除错误提示之后的回调,一般用于还原afterShowErrorTip接口制造的错误提示,因此这两个接口应当成对实现
    示例:
    [input/textarea/select].afterClearErrorTip=function(){}

小贴士:

新版的校验提示总是会优先显示在输入框上紧随文字之后,即使被遮住也会自动修复,实在修复不了的才会显示在wrapper上,如果显示在wrapper上之后还是被遮住且无法被自动修复,那么插件会在控制台输出原因。
You can’t perform that action at this time.