【jQuery基础学习】06 jQuery表单验证插件-Validation

2023-07-29,,

jQuery的基础部分前面都讲完了,那么就看插件了。

关于jQuery表单验证插件-Validation

validation特点:

内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
自定义验证规则:可以很方便地自定义验证规则
简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能
实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证

使用方法:

    引用jQuery库和Validation插件

    <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>

    确定哪个表单需要被验证,那么就调用即可

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

    针对不同的字段,进行验证规则编码,设置字段相应的属性

    <input id="username" name="username" class="required email" minilength="2" />
    <!--在上面设置 required为必填,email验证是否为邮箱,如果是url就验证是否为url,minilength=2为最小长度为2---->

更好的使用方法:

  下面的玩法是为了实现与HTML元素无关联,通过name属性来关联字段和验证规则的验证写法,这种写法能实现行为和结构的分离。

页面

<input id="myname" name="username"/>

代码

   $("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
},
url:"url",
comment:"required"
}
});

国际化

  就是这个插件的验证信息默认是英文的。那么要弄成中文,就要引用新的文件:

  jquery.validate.messages_cn.js

自定义验证信息

  valication插件可以很方便地自定义验证规则。

  $("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
}
}
,messages:{
username:{
required:'请输入账户邮箱',
email:'请输入正确的邮箱地址'
}
}
});

自定义验证信息并美化

  例如为验证提示信息加入图片:

   $("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
} }
,errorElement:"myErrorElement"//用来创建错误信息提示标签
,success:function(label){//验证成功后执行的回调函数
//label指向上面那个错误提示信息标签myErrorElement
label.text("") //清空错误消息提示
.addClass("success");//加入自定义的success类
}
});

然后在css里面加入对应样式:

myErrorElement.error{
background:url("2.ico") no-repeat 0px 0px;
padding-left:48px;
}
myErrorElement.success{
background:url("1.png") no-repeat 0px 0px;
padding-left:48px;
}

自定义验证规则

以下为用此jQuery插件实现验证码功能的代码

页面

<p>
<label for="myValcode">验证码</label>
<input id="myValcode" name="valcode">=7+9
</p>

代码

  //自定义一个验证方法
$.validator.addMethod(
"formula",
function(value,element,param){
return value==eval(param);
},
'请正确输入数学公式计算后的结果'
);
//调用该验证规则
$("#myform").validate({
rules:{
username:{
required:true,
minlength:2,
email:true
},
valcode:{formula:7+9}
}
});

【jQuery基础学习】06 jQuery表单验证插件-Validation的相关教程结束。

《【jQuery基础学习】06 jQuery表单验证插件-Validation.doc》

下载本文的Word格式文档,以方便收藏与打印。