欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery插件之validation插件

程序员文章站 2022-06-21 09:20:04
前面的话 最常使用javascript的场合就是表单的验证,而jquery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——validation。v...

前面的话

最常使用javascript的场合就是表单的验证,而jquery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——validation。validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多web开发者的好评。本文将详细介绍validation插件

概述

jquery validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 url 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 api。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言

作为一个标准的验证方法库,validation拥有以下特点:

1、内置验证规则:拥有必填、数字、e-mail、url和信用卡号等19类内置验证规则

2、自定义验证规则:可以很方便地自定义验证规则

3、简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能

4、实时验证:可以通过keyup或blur事件触发验证

validation作为jquery的一个插件,使用时需要同jquery一起引入,注意要先引入jquery

<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>

快速上手

validation功能强大且api众多,如果要快速上手,只要掌握常用功能即可

<form id="demoform">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoform').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  password:{
   required: true,
   minlength: 2,
   maxlength:10
  }
 }
})
</script>

上述代码主要对name为'username'和'password'这两个input控件进行了校验,这两个控件必须填写内容,且字符长度必须在2-10之间

校验规则

在快速上手的例子中,使用了required、minlength和maxlength这三个校验规则。实际上validation的校验规则有17个之多

序号   规则      描述
   required:true    必须输入的字段
   remote:"check.php"  使用 ajax 方法调用 check.php 验证输入值
   email:true    必须输入正确格式的电子邮件
   url:true     必须输入正确格式的网址
   date:true     必须输入正确格式的日期,内部调用date.parse()方法进行校验
   dateiso:true    必须输入正确格式的日期(iso),如:2009-06-23,1998/01/22
   number:true    必须输入合法的数字(负数,小数)
   digits:true    必须输入整数
   creditcard:    必须输入合法的信用卡号
   equalto:"#field"   输入值必须和 #field 相同
   accept:     输入拥有合法后缀名的字符串(上传文件的后缀)
   maxlength:5    输入长度最多是 5 的字符串(汉字算一个字符)
   minlength:10    输入长度最小是 10 的字符串(汉字算一个字符)
   rangelength:[5,10]  输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)
   range:[5,10]    输入值必须介于 5 和 10 之间
   max:5      输入值不能大于 5
   min:10     输入值不能小于 10

下面使用一个更详细的例子,对上面的17个规则进行应用

<form id="demoform">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <label for="confirm-password">确认密码</label>
  <input type="password" id="confirm-password" name="confirm-password"/>
 </p>
 <p>
  <label for="email">电子邮件:</label>
  <input id="email" name="email"/>
 </p>
 <p>
  <label for="url">网址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <label for="date">生日:</label>
  <input id="date" name="date"/>
 </p>
 <p>
  <label for="num">随机数(0-9):</label>
  <input id="num" name="num"/>
 </p>
 <p>
  <label for="card">信用卡号:</label>
  <input id="card" name="card"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoform').validate({
 rules:{
  username:{
   required: true,
   maxlength: 10
  },
  password:{
   required: true,
   range:[5,10]
  },
  'confirm-password':{
   equalto: "#password"
  },
  email:{
   email:true
  },
  url:{
   url:true
  },
  date:{
   dateiso:true
  },
  num:{
   min:0,
   max:9
  },
  card:{
   creditcard:true
  }
 }
})
</script>

默认提示

由上面的例子中看出,validate的默认提示是英文的

messages: {
 required: "this field is required.",
 remote: "please fix this field.",
 email: "please enter a valid email address.",
 url: "please enter a valid url.",
 date: "please enter a valid date.",
 dateiso: "please enter a valid date ( iso ).",
 number: "please enter a valid number.",
 digits: "please enter only digits.",
 creditcard: "please enter a valid credit card number.",
 equalto: "please enter the same value again.",
 maxlength: $.validator.format( "please enter no more than {0} characters." ),
 minlength: $.validator.format( "please enter at least {0} characters." ),
 rangelength: $.validator.format( "please enter a value between {0} and {1} characters long." ),
 range: $.validator.format( "please enter a value between {0} and {1}." ),
 max: $.validator.format( "please enter a value less than or equal to {0}." ),
 min: $.validator.format( "please enter a value greater than or equal to {0}." )
}

不过可以将其修改为中文,只要加入以下代码

$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateiso: "请输入有效的日期 (yyyy-mm-dd)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalto: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});

使用方式

上面的例子中,validate控件的使用,都是通过使用validate()方法完成的,由于这种方法将html结构和javascript逻辑分离,使得代码更加优化

实际上,还有另一种方法就是通过添加html属性的方式或添加class类名的方式来进行验证,类似于html5新增的input类控件的功能

由于已经将验证规则添加到html元素中,所以调用validate()方法时,参数为空

<form id="demoform">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" class="required" minlength="2"/>
 </p>
 <p>
  <label for="email">电子邮件:</label>
  <input id="email" name="email" class="required email"/>
 </p>
 <p>
  <label for="url">网址:</label>
  <input id="url" name="url" class="url"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoform').validate({})
</script>

更改提示

无论是validate插件自带的英文提示,或者是其扩展的中文提示,可能与实际项目的需求不相符。这时,就需要我们对错误提示进行更改

而更改错误提示的方法也很简单,只需要使用validate()函数里的,messages()方法即可。如果某个控件没有使用messages()方法,则使用默认的错误提示信息。如下所示

在messages()方法中,{0}代表rules()方法当前规则的属性值

<form id="demoform">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" />
 </p>
 <p>
  <label for="email">电子邮件:</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="url">网址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoform').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  email:{
   required: true,
   email:true
  },
  url:{
   required: true,
   url:true   
  }
 },
 messages:{
  username:{
   required:"请输入用户名",
   minlength:"至少输入{0}个字符"
  },
  email:{
   required:"请输入邮箱",
   email:"邮箱格式不正确"
  },
  url:{
   required:"请输入网址",
   url:"网址格式不正确(完整的网址应包括http://或https://)"
  }
 }
})
</script>

美化样式

实际上,validate插件输出错误信息的方式是通过增加一个label控件实现的,该label控件的id名为'输入控件的id名-error',类名为'error',且位于输入控件的右侧

jQuery插件之validation插件

下表中列出了关于错误信息的相关属性的方法

参数      类型    默认值    描述 
errorclass    string  "error"  指定错误提示的css类名 
errorelement    string  "label"  用什么标签标记错误 
errorcontainer   selector    无   显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。如errorcontainer: "#messagebox1, #messagebox2" 
errorlabelcontainer selector   无   把错误信息统一放在一个容器里面 
wrapper    string    无   用什么标签再把上边的errorelement包起来

【成功样式】

validate插件有一个success()方法,用来设置要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个css类,也可跟一个函数

success:string,callback

success: function(label) {
 label.html(" ").addclass("success");
} 

success: "success"

但实际上,validate插件只是将label标签添加了一个'success'类,且原先的'error'类并没有删除。且经过实际测试,'error'类名无法删除,删除之后,每次验证成功时,validate插件都会自动再生成一个label标签

所以,success的效果无法正常使用,这应该是validate插件的一个bug

<style>
label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;}
</style>
<body>
<form id="demoform">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" />
 </p>
 <p>
  <label for="email">电子邮件:</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="url">网址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoform').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  email:{
   required: true,
   email:true
  },
  url:{
   required: true,
   url:true   
  }
 },
 messages:{
  username:{
   required:"请输入用户名",
   minlength:"至少输入{0}个字符",
   maxlength:"最多输入{0}个字符"
  },
  email:{
   required:"请输入邮箱",
   email:"邮箱格式不正确"
  },
  url:{
   required:"请输入网址",
   url:"网址格式不正确(完整的网址应包括http://或https://)"
  }
 } 
})
</script>

自定义验证

由于需求的需要,除提供的默认验证规则外,还需要自定义验证规则,满足业务需要。这时就需要使用addmethod()方法

【addmethod(】

addmethod(name,method,message)方法用来添加一个新的验证方法

参数 name 是添加的方法的名字。参数 method 是一个函数,接收三个参数 (value,element,param)。value 是元素的值,element 是元素本身,param 是参数

以验证手机号为例,手机号一般是11位,前3位是号段,后8位一般没有限制。而且,在手机开头很可能有0或+86

//开头
(0|\+86)?
//前3位
13\d|14[579]|15[0-35-9]|17[0135-8]|18\d
//后8位
\d{8}
//手机号码
var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
$.validator.addmethod({
 'phone',
 function(value,element,param){
  var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
  return value.test(reg);
 },
 '请输入正确的手机号码'
})
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,r0lgodlhdgaoamqaaopsapwpgpvf0o5zmpgiupe+n////+tdepjjsp718poeco1oipruwpzq4pa0kpktypsof////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bauuabealaaaaaaoaa4aaavcycqm0aaaa5sibhgcmhaulazej528agisgaddiuseyaydopbsaaomxdlpokvpb0etfxskpjey6fd4ghrjbaf1zcydbx/jfyi8doeh9yaqcgm0ftwxmywsufz1lceaow==');}
</style>
<form id="demoform">
 <p>
  <label for="phone">手机号码:</label>
  <input type="text" id="phone" name="phone" />
 </p>
 <p>
  <input type="button" value="提交">
 </p>
</form> 
<script>
$.validator.addmethod(
 'phone',
 function(value,element,param){
  var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
  return reg.test(value);
 },
 '请输入正确的手机号码'
);
$('#demoform').validate({
 rules:{
  phone:{
   required: true,
   phone:true   
  }
 },
 messages:{
  phone:{
   required:"请输入手机号码"
  }
 } 
})
</script>

修改触发方式

下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加

触发方式      类型   描述                         默认值
onsubmit     boolean 提交时验证。设置为 false 就用其他方法去验证     true
onfocusout    boolean 失去焦点时验证(不包括复选框/单选按钮)         true
onkeyup     boolean 在 keyup 时验证。                   true
onclick     boolean 在点击复选框和单选按钮时验证              true
focusinvalid  boolean 提交表单后,未通过验证的表单会获得焦点          true
focuscleanup  boolean 如果是true,当未通过验证的元素获得焦点时,移除错误提示 false

远程校验

使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项

[注意]远程地址只能输出 "true" 或 "false",不能有其他输出

remote: {
 url: "check-email.php",  //后台处理程序
 type: "post",    //数据发送方式
 datatype: "json",   //接受数据格式 
 data: {      //要传递的数据
  username: function() {
   return $("#username").val();
  }
 }
}
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,r0lgodlhdgaoamqaaopsapwpgpvf0o5zmpgiupe+n////+tdepjjsp718poeco1oipruwpzq4pa0kpktypsof////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bauuabealaaaaaaoaa4aaavcycqm0aaaa5sibhgcmhaulazej528agisgaddiuseyaydopbsaaomxdlpokvpb0etfxskpjey6fd4ghrjbaf1zcydbx/jfyi8doeh9yaqcgm0ftwxmywsufz1lceaow==');}
</style>
<form id="demoform">
  <p>
    <label for="num">请选择数字</label>
    <select name="num" id="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>
    <input type="button" value="提交">
  </p>
</form> 
<script>
$('#demoform').validate({
  rules:{
    num:{
      remote:"validatetest.php"
    }
  },
  messages:{
    num:{
      remote:"选择的数字不正确"
    }
  }
});
</script>
<?php
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
$data = test_input($_request['num']);
if($data == '2'){
  echo "true";
}else{
  echo "false";
}
?>

最后

validation插件的功能不只于此,但本文基本上把常用的功能进行了详细的介绍。如果要了解validation更高级的功能,请移步

最后介绍一个比较有趣的知识——validate、validation和validator,它们的中文意思是验证。validation插件的js文件名是validate.js,validation插件中最常用的方法就是validate()方法,基本上所有的验证操作都通过该方法进行。如果要进行自定义验证的话,则需要用到validator对象下的静态方法addmethod()

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!