jquery插件validation实现验证身份证号等
先推荐一个基于bootstrap的jQuery validation插件：
jQuery validation添加验证规则
validata.html
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&!-- TemplateBeginEditable name="doctitle" --&
&title&无标题文档&/title&
&script src="lib/jquery.js" type="text/javascript"&&/script&
&script src="lib/jquery.validate.js" type="text/javascript"&&/script&
&script src="lib/card.js" type="text/javascript"&&/script&
&script src="lib/validata.js" type="text/javascript"&&/script&
&style type="text/css"&
em.success{
background:url("images/tips_arrow.gif") no-repeat left 0
padding-left:16
margin-left:2
background:url("images/tips_arrow.gif") no-repeat left -51
padding-left:10
font-style:
font-size:11
margin-left:2
font-family:12px/162% Arial, Helvetica, sans-
&form class="cmsform" id="commentForm" method="get" action=""&
&label for="cusername"&姓名&/label&&em&*&/em&
&input id="cusername" name="username" size="25" /&
&label for="cemail"&电子邮件&/label&&em&*&/em&
&input id="cemail" name="email" size="25" /&
&label for="card"&身份证号&/label&&em&*&/em&
&input id="card" name="card" size="25"/&
&label for="passport"&护照编号&/label&&em&*&/em&
&input id="passport" name="passport" size="25"/&
&label for="phone"&电话号码&/label&&em&*&/em&
&input id="phone" name="phone" size="25" /&
validata.js
$(function(){
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.
for(var i = 0; i & value. i++){
if(value.charCodeAt(i) & 127){
return this.optional(element) || ( length &= param[0] && length &= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || idCardNoUtil.checkIdCardNo(value);
}, "请正确输入您的身份证号码");
//护照编号验证
jQuery.validator.addMethod("passport", function(value, element) {
return this.optional(element) || checknumber(value);
}, "请正确输入您的护照编号");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
//开始验证
$('#commentForm').validate({
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
required:true,
email:true
required:true,
isMobile:true
required:true,
stringCheck:true,
byteRangeLength:[3,100]
required:true,
isIdCardNo:true
passport:{
required:true,
passport:true
messages:{
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
required: "&font color=red&请输入一个Email地址&/fond&",
email: "请输入一个有效的Email地址"
required: "请输入您的联系电话",
isPhone: "请输入一个有效的联系电话"
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
required:"请输入身份证号",
isIdCardNo:"请输入正确的身份证号"
passport:{
required:"请输入护照编号",
passport:"请输入正确的护照编号"
focusInvalid: false,
onkeyup: false,
errorPlacement: function(error, element) {
error.appendTo( element.parent());
errorElement:"em",
error:function(label){label.text(" ").addClass("error");}
var idCardNoUtil = {
provinceAndCitys: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",
31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",
45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",
65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"},
powers: ["7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"],
parityBit: ["1","0","X","9","8","7","6","5","4","3","2"],
genders: {male:"男",female:"女"},
checkAddressCode: function(addressCode){
var check = /^[1-9]\d{5}$/.test(addressCode);
if(!check)
if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){
checkBirthDayCode: function(birDayCode){
var check = /^[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))$/.test(birDayCode);
if(!check)
var yyyy = parseInt(birDayCode.substring(0,4),10);
var mm = parseInt(birDayCode.substring(4,6),10);
var dd = parseInt(birDayCode.substring(6),10);
var xdata = new Date(yyyy,mm-1,dd);
if(xdata & new Date()){
//生日不能大于当前日期
}else if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) ){
getParityBit: function(idCardNo){
var id17 = idCardNo.substring(0,17);
var power = 0;
for(var i=0;i&17;i++){
power += parseInt(id17.charAt(i),10) * parseInt(idCardNoUtil.powers[i]);
var mod = power % 11;
return idCardNoUtil.parityBit[mod];
checkParityBit: function(idCardNo){
var parityBit = idCardNo.charAt(17).toUpperCase();
if(idCardNoUtil.getParityBit(idCardNo) == parityBit){
checkIdCardNo: function(idCardNo){
//15位和18位身份证号码的基本校验
var check = /^\d{15}|(\d{17}(\d|x|X))$/.test(idCardNo);
if(!check)
//判断长度为15位或18位
if(idCardNo.length==15){
return idCardNoUtil.check15IdCardNo(idCardNo);
}else if(idCardNo.length==18){
return idCardNoUtil.check18IdCardNo(idCardNo);
//校验15位的身份证号码
check15IdCardNo: function(idCardNo){
//15位身份证号码的基本校验
var check = /^[1-9]\d{7}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}$/.test(idCardNo);
if(!check)
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check)
var birDayCode = '19' + idCardNo.substring(6,12);
//校验日期码
return idCardNoUtil.checkBirthDayCode(birDayCode);
//校验18位的身份证号码
check18IdCardNo: function(idCardNo){
//18位身份证号码的基本格式校验
var check = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/.test(idCardNo);
if(!check)
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check)
//校验日期码
var birDayCode = idCardNo.substring(6,14);
check = idCardNoUtil.checkBirthDayCode(birDayCode);
if(!check)
//验证校检码
return idCardNoUtil.checkParityBit(idCardNo);
formateDateCN: function(day){
var yyyy =day.substring(0,4);
var mm = day.substring(4,6);
var dd = day.substring(6);
return yyyy + '-' + mm +'-' +
//获取信息
getIdCardInfo: function(idCardNo){
var idCardInfo = {
gender:"", //性别
birthday:"" // 出生日期(yyyy-mm-dd)
if(idCardNo.length==15){
var aday = '19' + idCardNo.substring(6,12);
idCardInfo.birthday=idCardNoUtil.formateDateCN(aday);
if(parseInt(idCardNo.charAt(14))%2==0){
idCardInfo.gender=idCardNoUtil.genders.
idCardInfo.gender=idCardNoUtil.genders.
}else if(idCardNo.length==18){
var aday = idCardNo.substring(6,14);
idCardInfo.birthday=idCardNoUtil.formateDateCN(aday);
if(parseInt(idCardNo.charAt(16))%2==0){
idCardInfo.gender=idCardNoUtil.genders.
idCardInfo.gender=idCardNoUtil.genders.
return idCardI
getId15:function(idCardNo){
if(idCardNo.length==15){
return idCardNo;
}else if(idCardNo.length==18){
return idCardNo.substring(0,6) + idCardNo.substring(8,17);
getId18: function(idCardNo){
if(idCardNo.length==15){
var id17 = idCardNo.substring(0,6) + '19' + idCardNo.substring(6);
var parityBit = idCardNoUtil.getParityBit(id17);
return id17 + parityB
}else if(idCardNo.length==18){
return idCardNo;
//验证护照是否正确
function checknumber(number){
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/(P\d{7})|(G\d{8})/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
以上所述就是本文的全部内容了，希望大家能够喜欢。
如果您喜欢本文请分享给您的好友，谢谢！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）validation插件怎么做select的验证呢?
validation插件怎么做select的验证呢?
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2jQuery 表单验证插件formValidation实现个性化错误提示
jQuery 表单验证插件formValidation实现个性化错误提示
作者： 来源：
其效果图如下：使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] / 同时需要自定义显示提示错误信息的CSS样式 使用实例 一，包含文件部分 复制代码 代码如下:&script src="jquery.js" type="text/javascript"&&/script& &script src="jquery.validationEngine.js" type="text/javascript"&&/script& &link rel="stylesheet" href="validationEngine.jquery.css" type="text/css" media="screen" /& 二，HTML部分 复制代码 代码如下:&input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" /& formValidation插件的表单验证方法如下： validate[required,custom[onlyLetter],length[0,100]] 参数说明：required表示表单必填，custom[]表示验证的条件，length表示长度 formValidation插件其它说明： optional: Special: 表单值不为空的情况 required: 必埴 length[0,100] : 长度范围 minCheckbox[7] : 最小复选框数 confirm[fieldID] : 匹配其它字段 (如:confirm password) telephone : 匹配电话号码规则 email : 匹配电子邮箱规则 onlyNumber : 匹配数字规则 noSpecialCaracters : 匹配字符规则 onlyLetter : 匹配字母规则 date : 匹配 YYYY-MM-DD 格式 formValidation插件应用实例 一，验证单选框 复制代码 代码如下:&input class="validate[required] radio" type="radio" name="radiogoupe" value="5"& &input class="validate[required] radio" type="radio" name="radiogoupe" value="3"/& &input class="validate[required] radio" type="radio" name="radiogoupe" value="9"/& 二，验证复选框 复制代码 代码如下:&input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="5"& &input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="3"/& &input class="validate[minCheckbox[2]] checkbox" type="checkbox" name="checkboxgroupe" value="9"/& 三，验证下拉框 复制代码 代码如下:&select name="sport" id="sport" class="validate[required]" & &option value="1"&biuuu_1&/option& &option value="2"&biuuu_2&/option& &option value="3"&biuuu_3&/option& &option value="4"&biuuu_4&/option& &/select&四，验证电话号码 复制代码 代码如下:&input class="validate[required,custom[telephone]] text-input" type="text" name="telephone"/&五，验证邮箱 复制代码 代码如下:&input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" /& 如上实例，使用formValidation插件实现表单验证方法比较简单，主要在于其实现的个性化错误提示，同时，可自定义匹配规则，如下： "telephone":{ "regex":"/^[0-9-()]+$/", "alertText":"* Invalid phone number"}, 其中regex表示匹配规则 这样使用alertText就可以实现自定义的表单错误提示文本，这与Validation插件的使用方法相同，使用jQuery表单验证插件formValidation实现个性化错误提示，值得推荐。 文件打包下载
　　推荐阅读
DOM对象的学习
javascript
这是第一个节点
innerHTML的使用
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]&&&
本文标题：
地址：/kaifa2/JS/28530.html
乐购科技部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与乐购科技进行文章共享合作。
自媒体专栏
栏目ID=71的表不存在(操作类型=0)jQuery验证插件validation使用指南
投稿：hebedich
字体：[ ] 类型：转载 时间：
jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求，下面我们就来仔细研究下这款jQuery插件的具体使用方法。
在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。
jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate
jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。
1.jquery.validate插件功能
简单实现客户端信息验证，过滤不符合要求的信息
2.jquery.validate官方地址
官方地址：,有详细的插件使用说明
官方demo：
3.jquery.validate使用方法
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="jquery.validate.js"&&/script&
2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。
margin-left:8
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
firstname: "required",
username: {
required: true,
minlength: 2
password: {
required: true,
minlength: 5
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
required: true,
email: true,
dateformat: "required",
terms: "required"
messages: {
firstname: "姓名不能为空",
username: {
required: "用户名不能为空",
minlength: jQuery.format("用户名只少由 {0} 字符组成")
password: {
required: "密码不能为空",
minlength: jQuery.format("密码只少由 {0} 字符组成")
password_confirm: {
required: "确认密码不能为空",
minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
equalTo: "秘密与确认密码不一致"
required: "邮箱不能为空",
email: "邮箱格式不正确"
dateformat: "请选择性别",
terms: " "
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next());
else if ( element.is(":checkbox") )
error.appendTo ( element.next());
error.appendTo( element.parent().next());
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
// set this class to error-labels to indicate valid fields
success: function(label) {
// set & as text for IE
label.html("&").addClass("checked");
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如
$.validator.addMethod("checkUserName", function(value) {
//value为验证的值，对应于元素id
//方法代码
}, '用户名格式不正确');
使用自定义方法也非常简单，只需要 元素id:”checkUserName”
4.使用的html
&form id="signupform" autocomplete="off" method="get" action=""&
&td class="label"&&label id="lfirstname" for="firstname"&姓名&/label&&/td&
&td class="field"&&input id="firstname" name="firstname" type="text" value="" maxlength="100" /&&/td&
&td class="status"&&/td&
&td class="label"&&label id="lusername" for="username"&用户名&/label&&/td&
&td class="field"&&input id="username" name="username" type="text" value="" maxlength="50" /&&/td&
&td class="status"&&/td&
&td class="label"&&label id="lpassword" for="password"&密码&/label&&/td&
&td class="field"&&input id="password" name="password" type="password" maxlength="50" value="" /&&/td&
&td class="status"&&/td&
&td class="label"&&label id="lpassword_confirm" for="password_confirm"&确认密码&/label&&/td&
&td class="field"&&input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /&&/td&
&td class="status"&&/td&
&td class="label"&&label id="lemail" for="email"&邮箱&/label&&/td&
&td class="field"&&input id="email" name="email" type="text" value="" maxlength="150" /&&/td&
&td class="status"&&/td&
&td class="label"&&label&性别&/label&&/td&
&td class="field" colspan="2" style="vertical-align: padding-top: 2"&
&td style="padding-right: 5"&
&input id="sex_men" name="dateformat" type="radio" value="0" /&
&label id="lbl_sex_men" for="dateformat_eu"&男&/label&
&td style="padding-left: 5"&
&input id="sex_women" name="dateformat" type="radio" value="1" /&
&label id="lbl_sex_women" for="dateformat_am"&女&/label&
&td class="label"&&&/td&
&td class="field" colspan="2"&
&div id="termswrap"&
&input id="terms" type="checkbox" name="terms" /&
&label id="lterms" for="terms"&以阅读并同意网站条款.&/label&
&/div& &!-- /termswrap --&
&td class="label"&&/td&
&td class="field" colspan="2"&
&input id="signupsubmit" name="signup" type="submit" value="注册" /&
更多验证方法的应用请查看
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具