[框架]form表单验证写法-HUI模板

适用前端模板:H-UI

raycom框架的H-UI模板界面使用jQuery Validate 插件为表单提供验证功能,涉及到表单验证的操作包括js声明,form表单设置,以及表单验证执行。具体如下:

  1. js部分引入。在页面初始化部分:
  $(function(){    
    validator = $("#form").validate({        
        submitHandler:function(form){                
            if (!confirm("请确认是否提交?")) return;                
             form.submit();            
            }    
        });    
});

说明:在页面加载完成后,将需要进行验证的表单生成jquery validate的表单验证对象,在后续验证操作时,使用表单验证对象进行操作,同时,对绑定表单的默认提交操作进行修改,插入验证过程。

  1. form表单部分

在input框中增加验证参数声明,form提交时,会根据设置的验证参数对表单进行验证。可以设置一个或者多个参数,一个以上参数时,以逗号分隔。

<input type="text" class="input-text radius size-S" value="" id="remark" name="remark"
        placeholder="代码描述" validata="{required:true,isDigits:true}"> 

其中,参数分为判断型和范围型,判断型包括是否必输,格式是否满足邮箱,电话等,判断型参数的值为true和false两种;范围型包括最大值,最小值,最大长度,最小长度等,其参数的值为具体的内容。所有参数列表参见第4部分

  1. form表单的验证

表单验证一般是向服务器提交数据时触发的,其中
1)form表单直接提交
通过点击类型为submit的按钮,会自动将form的数据提交到form的url中,此时会自动触发form的表单验证
2)通过js方法提交数据(推荐)
js方法提交数据有两种模式,一是ajax提交,另一种是form提交
ajax提交时,需要调用验证代码进行验证

if(validator.form()){//校验通过}

根据返回值确认是否进行后续操作
js方法调用submit方法,直接提交form即可

 actSubmit($('#form'), ctx + "/comCode");

3)直接返回不适用form表单验证
此时需要通过按钮调用返回的js,在js中执行

actCancel($('#form'), ctx + "/comCode");

方法actCancel会绕过form表单并且不提交表单中的任何数据,只是方式form的url

  1. 表单验证参数

使用jquery validata的原生参数,列表如下:

序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6dateISO:true必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7number:true必须输入合法的数字(负数,小数)。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串(上传文件的后缀)。
12maxlength:5输入长度最多是 5 的字符串(汉字算一个字符)。
13minlength:10输入长度最小是 10 的字符串(汉字算一个字符)。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。
18isTel:true手机号码或电话号码。
19isPhone:true电话号码。
20isMobile:true手机号码格式不正确。
21isEnglish:true只能包含英文字符。
22isChinese:true只能包含中文字符.
23isDigits:true只能输入0-9数字.
24isNumber:true匹配数值类型,包括整数和浮点数.
25isInteger:true匹配integer.
26isFloat:true只能包含数字、小数点等字符.
27isFloatGteZero:true浮点数必须大于或等于0.

http://www.runoob.com/jquery/jquery-plugin-validate.html

Last modification:October 17th, 2018 at 05:57 pm
If you think my article is useful to you, please feel free to appreciate