jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery validation

jquery validation验证电话号码,email(实例代码)

投稿：jingxian

jquery validation验证电话号码,email(实例代码),需要的朋友可以过来参考下,希望对大家有所帮助

validata.htm

复制代码 代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; 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 0px;
  padding-left:16px;
  margin-left:2px;
 }
 em.error{
  background:url("images/tips_arrow.gif") no-repeat left -51px;
  display:inline;
  padding-left:10px;
  font-style:normal;
  font-size:11px;
  margin-left:2px;
  font-family:12px/162% Arial, Helvetica, sans-serif;
 
 }
</style>

</head>

<body>
 <form class="cmsform" id="commentForm" method="get" action="">
  <p>
   <label for="cusername">姓名</label><em>*</em>
   <input id="cusername" name="username" size="25" />
  
  </p>
  <p>
   <label for="cemail">电子邮件</label><em>*</em>
   <input id="cemail" name="email" size="25" />
  
  </p>
  <p>
   <label for="phone">电话号码</label><em>*</em>
   <input id="phone" name="phone" size="25" />
  
  </p>
 </form>
</body>
</html>


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.length;
    for(var i = 0; i < value.length; i++){
  if(value.charCodeAt(i) > 127){
  length++;
  }
  }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
  
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
  var length = value.length;
  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-12345678
  return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
 
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
  var length = value.length;
  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({
  
  rules: {
  username: {
  required:true,
  stringCheck:true,
  byteRangeLength:[3,15]
  },
  email:{
  required:true,
  email:true
  },
  phone:{
  required:true,
  isMobile:true
  },
  address:{
  required:true,
  stringCheck:true,
  byteRangeLength:[3,100]
  },
  card:{
   required:true,
   isIdCardNo:true
 
  },
    passport:{
   required:true,
   passport:true
 
  }
  },
 
  
  messages:{
  username: {
  required: "请填写用户名",
  stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
  byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
  },
  email:{
  required: "<font color=red>请输入一个Email地址</fond>",
  email: "请输入一个有效的Email地址"
  },
  phone:{
  required: "请输入您的联系电话",
  isPhone: "请输入一个有效的联系电话"
  },
  address:{
  required: "请输入您的联系地址",
  stringCheck: "请正确输入您的联系地址",
  byteRangeLength: "请详实您的联系地址以便于我们联系您"
  },

  focusInvalid: false,
  onkeyup: false,
 
  
  errorPlacement: function(error, element) {
  error.appendTo( element.parent());
  },
  errorElement:"em",
  error:function(label){label.text(" ").addClass("error");}
  }); 
})

card.js
复制代码 代码如下:

var idCardNoUtil = {

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) return false;
if(idCardNoUtil.provinceAndCitys[parseInt(addressCode.substring(0,2))]){
return true;
}else{
return false;
}
},

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) return false;
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()){
return false;//生日不能大于当前日期
}else if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) ){
return true;
}else{
return false;
}
},

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){
return true;
}else{
return false;
}
},

//判断长度为15位或18位
if(idCardNo.length==15){
return idCardNoUtil.check15IdCardNo(idCardNo);
}else if(idCardNo.length==18){
return idCardNoUtil.check18IdCardNo(idCardNo);
}else{
return false;
}
},
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
var birDayCode = '19' + idCardNo.substring(6,12);
//校验日期码
return idCardNoUtil.checkBirthDayCode(birDayCode);
},

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) return false;
//校验地址码
var addressCode = idCardNo.substring(0,6);
check = idCardNoUtil.checkAddressCode(addressCode);
if(!check) return false;
//校验日期码
var birDayCode = idCardNo.substring(6,14);
check = idCardNoUtil.checkBirthDayCode(birDayCode);
if(!check) return false;
//验证校检码
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 +'-' + dd;
},

//获取信息
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.female;
}else{
idCardInfo.gender=idCardNoUtil.genders.male;
}
}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.female;
}else{
idCardInfo.gender=idCardNoUtil.genders.male;
}

}
return idCardInfo;
},


getId15:function(idCardNo){
if(idCardNo.length==15){
return idCardNo;
}else if(idCardNo.length==18){
return idCardNo.substring(0,6) + idCardNo.substring(8,17);
}else{
return null;
}
},


getId18: function(idCardNo){
if(idCardNo.length==15){
var id17 = idCardNo.substring(0,6) + '19' + idCardNo.substring(6);
var parityBit = idCardNoUtil.getParityBit(id17);
return id17 + parityBit;
}else if(idCardNo.length==18){
return idCardNo;
}else{
return null;
}
}
};
function checknumber(number){
var str=number;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/(P\d{7})|(G\d{8})/;
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
   return true;
}else{
   return false;
}
};

阅读全文