form表单验证写法-HUI模板 框架说明

lake 2018-2-1 1608

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

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

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

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

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

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

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

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

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

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

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

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

方法actCancel会绕过form表单并且不提交表单中的任何数据,只是方式form的url
4. 表单验证参数
使用jquery validata的原生参数,列表如下:

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



最后于 2019-1-10 被lake编辑 ,原因:
最新回复 (0)
全部楼主
返回