最代码广告位
纵横科技的gravatar头像
纵横科技2013-12-11 18:51:20

【纵横科技】前端jquery表单验证框架jquery.validate.js实例demo

(一)HTML5表单验证

【纵横科技】前端jquery表单验证框架jquery.validate.js实例demo

1.验证是否为空,在表单控件中将required特性设置为true。

<input type="text" name="myText" required>

 

2.指定表单控件的type特性值(如number、email、url等)。

<input type="email" name="email">

<input type="url" name="url" >

<input type="number" name="number" >

 

 

 

3.自定义匹配规则,配合title属性一起使用最好(pattern)

<input type="text" name="creditcardnumber" pattern="[0-9]{5}" title="5位数字,没有空格或破折号" >

 

4.限制长度(maxLength)。

<input type="text" name="limitedText" maxLength="5">

 

5.限制数值型控件,最小值、最大值和步长。

<input type="range" name="ageCheck" min="5" max="30" step="5">

 

6.自定义错误信息customError,调用setCustomValidity(message)后,控件就会处于无效状态,并且customError返回true。要清除错误,只需在控件上调用setCustomValidity("")即可。

<input type="text" name="customError" pattern="^\d{4}$" oninput="ce(this)" >
<script>
//customError
function ce(i){

    var v = i.validity;

        if(true !== v.valueMessing){

               if(true === v.patternMismatch){

                   i.setCustomValidity("请输入4位数字");

            }else{

                i.setCustomValidity("");

            }

         }

     }

</script>

 

以上功能不需要任何引用,HTML5虽然强悍,当然也有劣势不是所有浏览器都支持HTML5,想知道你的浏览器支不支持,访问http://html5test.com/index.html就可以看到。

 

(二)基于jquery的Validate表单验证插件,它所提供的验证类型有:是否为空、数字、Email地址、判断输入值是否在某一范围内等,此外你也可以自定义验证规则,它也支持在一个输入框中使用多种验证规则。验证规则的提示信息是默认设置在JS文件中的,它也提供了函数让你可以自定义提示信息。

【纵横科技】前端jquery表单验证框架jquery.validate.js实例demo

1.默认校验规则 
(1)required:true 必输字段 
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值 
(3)email:true 必须输入正确格式的电子邮件 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(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 

例子:

<input type="text" name="required" class="required">

 

2.自定义规则addMethod(name,method,message)

name是添加的方法的名字;

method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数;

message:是自定义的错误提示

简单弄个例子,规则名af,只能输一个字母,范围是a-f。

$.validator.addMethod("af",function(value,element,params){    

     if(value.length>1){

          return false;

     } 

     if(value>=params[0] && value<=params[1]){     

          return true; 

     }else{ 

          return false;

     } 

},"必须是一个字母,且a-f"); 

用的时候,比如有个表单字段的id="username",则在rules中写

$("#form_id").validate({

    rules:{

        "af":{

             af:["a","f"]

        }

   }

});

 

3.引用

<script src="assets/formvalidation/bassistance/js/jquery.validate.min.js"></script>

<script src="assets/formvalidation/bassistance/js/lang/jquery.validate-zh_CN.js"></script>

初始化:

<script>

$("#form_id ").validate();

</script>

其它的就不一一介绍啦,有兴趣的搜索jquery Validate学习一下。

 

(三)基于jquery的validationEngine表单验证插件,根据官网提示,该插件支持IE6-8,Chrome浏览器,火狐,Safari,Opera 10,但由于有使用到了css3的阴影和圆角样式,所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果),整体来说还是不错的。

【纵横科技】前端jquery表单验证框架jquery.validate.js实例demo

1.默认校验规则 

名称

示例

说明

required

validate[required]

表示必填项

optional

validate[optional]

表示可选项。若不输入,不要求必填,若有输入,则验证其是否符合要求。

dateRange[name]

validate[dateRange[grp1]]

验证日期范围

dateTimeRange[name]

validate[dateTimeRange[grp1]]

验证日期及时间范围

minSize[int]

validate[minSize[6]]

最少输入字符数

maxSize[int]

validate[maxSize[20]]

最多输入字符数

groupRequired[name]

validate[groupRequired[grp2]]

群组中至少输入一项

min[int]

validate[min[1]]

最小值(该项为数字的最小值,注意与 minSize 的区分)

max[int]

validate[max[9999]]

最大值(该项为数字的最大值,注意与 maxSize 的区分)

past[date]

validate[past[2012/12/20]]

日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now

future[date]

validate[future[now]]

日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now

maxCheckbox[int]

validate[maxCheckbox[2]]

最多选取的项目数(用于Checkbox)

minCheckbox

validate[minCheckbox[2]]

最少选取的项目数(用于Checkbox)

equals

validate[equals[id]]

当前控件值需与 id 这个控件的值相同

phone

validate[custom[phone]]

验证电话号码

email

validate[custom[email]]

验证 Email 地址

integer

validate[custom[integer]]

验证整数

number

validate[custom[number]]

验证数字

date

validate[custom[date]]

验证日期,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D

dateFormat

validate[custom[dateFormat]]

验证日期格式,格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D

dateTimeFormat

validate[custom[dateTimeFormat]]

验证日期及时间格式,格式为:YYYY/MM/DD hh:mm:ss AM|PM

ipv4

validate[custom[ipv4]]

验证 ipv4 地址

url

validate[custom[url]]

验证 url 地址,需以 http://、https:// 或 ftp:// 开头

onlyNumberSp

validate[custom[onlyNumberSp]]

只接受填数字和空格

onlyLetterSp

validate[custom[onlyLetterSp]]

只接受填英文字母(大小写)和单引号(')

onlyLetterNumber

validate[custom[onlyLetterNumber]]

只接受数字和英文字母

ajax

validate[ajax[ajaxUserCallPhp]]

在验证规则中自定义

"ajaxUserCallPhp":{

"url":"phpajax/ajaxValidateFieldUser.php",

"extraData":"name=eric",

"alertTextOk":"* 此帐号名称可以使用",

"alertText":"* 此名称已被其他人使用",

"alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。"

}

funcCall

validate[funcCall[functionName]]

调用外部函数

验证规则均写在 validate[] 中,如有多条规则,用英文逗号(,) 分割,如:

<input type="text" name="first_name" class="validate[required,minSize[6],custom[onlyLetterNumber]]">

 

2.引用

<link rel="stylesheet" href="assets/formvalidation/validationengine/css/jquery.validationEngine.min.css">

<script src="assets/formvalidation/validationengine/js/lang/jquery.validationEngine-zh_CN.js"></script>

<script src="assets/formvalidation/validationengine/js/jquery.validationEngine.min.js"></script>

 

初始化:

 

<script>

$("#form_validate_tooltip").validationEngine();

</script>

附上官网的API在附件中,里面讲的更详细,其它的就不一一介绍啦,有兴趣的看一下。


最代码官方编辑于2013-12-18 0:21:55


打赏

文件名:form-validation.rar,文件大小:720.966K下载
  • /
      • /form-validation
          • /form-validation/assets
              • /form-validation/assets/bootstrap
                  • /form-validation/assets/bootstrap/css
                    • /form-validation/assets/bootstrap/css/bootstrap.min.css
                  • /form-validation/assets/bootstrap/img
                    • /form-validation/assets/bootstrap/img/glyphicons-halflings-white.png
                    • /form-validation/assets/bootstrap/img/glyphicons-halflings.png
                  • /form-validation/assets/bootstrap/js
                    • /form-validation/assets/bootstrap/js/bootstrap.min.js
              • /form-validation/assets/formvalidation
                  • /form-validation/assets/formvalidation/bassistance
                      • /form-validation/assets/formvalidation/bassistance/js
                        • /form-validation/assets/formvalidation/bassistance/js/jquery.metadata.js
                        • /form-validation/assets/formvalidation/bassistance/js/jquery.validate.min.js
                          • /form-validation/assets/formvalidation/bassistance/js/lang
                            • /form-validation/assets/formvalidation/bassistance/js/lang/jquery.validate-zh_CN.js
                  • /form-validation/assets/formvalidation/validationengine
                      • /form-validation/assets/formvalidation/validationengine/css
                        • /form-validation/assets/formvalidation/validationengine/css/jquery.validationEngine.min.css
                      • /form-validation/assets/formvalidation/validationengine/js
                        • /form-validation/assets/formvalidation/validationengine/js/jquery.validationEngine.min.js
                          • /form-validation/assets/formvalidation/validationengine/js/lang
                            • /form-validation/assets/formvalidation/validationengine/js/lang/jquery.validationEngine-en.min.js
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友