Form表单验证

Posted 2020-09-13 印画

记录一下

Form表单验证   
 * 备注：
 * 在Form标签上 data-vaildR =“all” 得到所有的提示 （默认得到第一个）
 * 元素上必须要有name才会验证（input[name]、select[name]、textarea[name]）
 * 已过滤元素   :submit, :reset, :image,:disabled,:button 
 * 在元素上加上class="form_filter" 会过滤该元素
 * 
 * 表单的配置  
 *         data-tipName 提示文字（占位符） 例如  请输入{0}    {0}=data-tipName=“姓名”  => 请输入姓名
 *         data-valid   验证配置  

下面是Form表单的配置，我这里是写的一个js插件 需要引用（下面代码段只是一部分说明配置）

　　　　 required:"请输入完整数据",               required:true
        selectRequired:"请选择内容",             selectRequired:true
        CHS:"请输入汉字",                        CHS：true
        english:"请输入英文",                    english：true
        ip:"IP地址格式不正确",                   ip：true  
        email:"Email格式不正确",                 email：true
        ZIP:"邮政编码不存在",                    ZIP：true
        QQ:"QQ号码不正确",                       QQ：true
        mobile:"手机号码不正确",                 mobile：true
        tel:"电话号码不正确",                    tel：true
        mobileAndTel:"请正确输入电话号码",       mobileAndTel：true
        number:"请输入数字",                     number：true
        money:"请输入正确的金额",                money：true
        mone:"请输入整数或小数",                 mone：true
        integer:"请输入最小为{0}的整数",         integer：2  
        integ:"请输入整数",                      integ：true
        range:"输入的数字在{0}到{1}之间",        range:[0,12]
        minPicLength:"至少上传{0}张图片",             minPicLength:6             
        maxLength:"最多{0}个字",                 maxLength:12 
        selectValid:"请选择",                    selectValid:
        idCode:"请输入正确的身份证号",            idCode:true
        loginName:"登录名称只允许汉字、英文字母、数字及下划线。",     loginName:true  
        equalTo:"两次输入的字符不一至",                              equalTo:"#pwd"  
        englishOrNum:"请输入英文、数字、下划线或者空格",              englishOrNum:true
        xiaoshu:"最多保留两位小数！",                                xiaoshu:true
        ddPrice:"请输入{0}到{1}之间正整数",                          ddPrice:[0,10]
        jretailUpperLimit:"请输入{0}到{1}之间的最多俩位小数的数字",   jretailUpperLimit:[0.2,10]
        rateCheck:"请输入{0}到{1}之间的最多俩位小数的数字！",         rateCheck:[0.2,10]

　　   <input type="text" name="user" data-tipName="手机号" data-valid=‘{required:true,minPicLength:6,maxLength:12}‘ /></p>
       <input type="password" name="pwd" id="pwd1"  data-tipName="密码" data-valid=‘{required:true}‘/></p>
       <input type="password" name="pwd" id="pwd2"  data-tipName="密码" data-valid=‘{required:true,equalTo:"#pwd1"}‘/></p>
       <input type="text" name="" id="pwd1"  data-tipName="密码" data-valid=‘{required:true,ddPrice:[0,10]}‘/></p>
       <input type="text" name="ss" class="form_filter"  id="pwd1"  data-tipName="密码" data-valid=‘{required:true,ddPrice:[0,10]}‘/></p> //该元素会过滤(form_filter)

 

例子：  

<form>
        <div>汉字:<input name="hanz" class="js_inputbox" type="text" placeholder="请输入汉字" data-tipname="汉字" data-valid=‘{required:true,CHS:true,maxLength:4}‘ /></div>
        <div>英文：<input name="yw" class="js_inputbox" type="text" placeholder="请输入英文" data-tipname="英文" data-valid=‘{english:true,required:true}‘ /></div>        
        <div class="submit">提交</div>
</form>

<script>
            $(function(){
                   $(".submit").click(function(){
                       var mes = $("form").validtor();
                        if (mes) {
                           alert(mes);
                            return false
                        }
                       alert("ajax")                       
                   })
            })
        </script>