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

适用前端模板：H-UI

raycom框架的H-UI模板界面使用jQuery Validate 插件为表单提供验证功能，涉及到表单验证的操作包括js声明，form表单设置，以及表单验证执行。具体如下：js部分引入。在页面初始化部分：$(function(){

validator = $("#form").validate({

submitHandler:function(form){

if (!confirm("请确认是否提交？")) return;

form.submit();

}

});

});

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

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

placeholder="代码描述" validata="{required:true,isDigits:true}">

其中，参数分为判断型和范围型，判断型包括是否必输，格式是否满足邮箱，电话等，判断型参数的值为true和false两种；范围型包括最大值，最小值，最大长度，最小长度等，其参数的值为具体的内容。所有参数列表参见第4部分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表单验证参数

使用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.