Form表单验证

Posted 印画

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Form表单验证相关的知识,希望对你有一定的参考价值。

记录一下

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>

以上是关于Form表单验证的主要内容,如果未能解决你的问题,请参考以下文章

angluar 表单的验证 动态数据项表单验证

JS表单验证代码

Element UI Form表单验证

element-ui Form表单验证

72django之简单验证码实现与form表单钩子函数补充

表单(上)EasyUI Form 表单EasyUI Validatebox 验证框EasyUI Combobox 组合框EasyUI Combo 组合EasyUI Combotree 组合树((代码片