js表单验证方法(验证输入格式、邮箱验证、身份证验证等)

发布时间:2020-12-05编辑:脚本学堂
js常用表单验证方法、表单验证代码,js使用正则表达式进行身份证号码验证的例子,js实现form表单提交时的输入合法性验证。

js表单验证代码

此代码的亮点在于:
可正则验证邮箱与网址、可以验证16位与18位的身份证号码、从身份证中读取性别信息。

例子:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js表单验证代码</title>
<script language="javascript">
function check_1(param){ //js验证表单不能为空
if(param==""||param==null){return false;}else{return true;}
}
function check_2(param){ //长度限制,字母是10个,汉字也是10个
if(param.length>10){return false;}else{return true;}
}
function check_3(param){ //只能输入汉字
var pattern= /^[u4e00-u9faf]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_4(param){ //只能输入数字
var pattern= /^[0-9]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_5(param){ //只能输入数字字母下划线
var pattern= /^[0-9a-zA-z_]+$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_6(param){ //js验证表单中邮箱格式
var pattern= /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check_7(param){ //网址格式验证
var pattern= /^((https|http|ftp|rtsp|mms)?://)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].[a-z]{2,6})(:[0-9]{1,4})?((/?)|(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$/;
var flag = pattern.test(param);
if(flag==false){return false;}else{return true;}
}
function check(){
var value=document.getElementById("testValue").value;
var result=check_7(value);//在这里设置验证函数的名称,我写了check_1~check_7七个常用的表单验证函数
if(result==false){
document.getElementById("testValue").style.border="2px solid red";
}else{
//document.getElementById("testValue").style.border="2px solid green";
document.getElementById("testValue").style.border="";
}
}
</script>
</head>
<body>
<div style="text-align: center;padding: 200px 0;">
请输入: <input id="testValue" name="" class="" type="text" style="width:200px;height:30px;"></input>
<input id="" name="" class="" type="button" value="点击验证" style="width:70px;height:30px;" onclick="check()"></input>
</div>
</body>
</html>

js表单验证代码:身份证号码验证

js实现身份证号码验证

根据身份证号码编码规则,使用js对其进行有效性验证代码
IdCard-Validate.js代码:
 

复制代码 代码示例:
/**
 * 身份证15位编码规则:dddddd yymmdd xx p
 * dddddd:地区码
 * yymmdd: 出生年月日
 * xx: 顺序类编码,无法确定
 * p: 性别,奇数为男,偶数为女
 * <p />
 * 身份证18位编码规则:dddddd yyyymmdd xxx y
 * dddddd:地区码
 * yyyymmdd: 出生年月日
 * xxx:顺序类编码,无法确定,奇数为男,偶数为女
 * y: 校验码,该位数值可通过前17位计算获得
 * <p />
 * 18位号码加权因子为(从右到左) Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,1 ]
 * 验证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
 * 校验位计算公式:Y_P = mod( ∑(Ai×Wi),11 )
 * i为身份证号码从右往左数的 2...18 位; Y_P为脚丫校验码所在校验码数组位置
 *
 */
var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ];// 加权因子
var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ];// 身份证验证位值.10代表X
function IdCardValidate(idCard) {
 idCard = trim(idCard.replace(/ /g, ""));
 if (idCard.length == 15) {
  return isValidityBrithBy15IdCard(idCard);
 } else if (idCard.length == 18) {
  var a_idCard = idCard.split("");// 得到身份证数组
  if(isValidityBrithBy18IdCard(idCard)&&isTrueValidateCodeBy18IdCard(a_idCard)){
   return true;
  }else {
   return false;
  }
 } else {
  return false;
 }
}
/**
 * 判断身份证号码为18位时最后的验证位是否正确
 * @param a_idCard 身份证号码数组
 * @return
 */
function isTrueValidateCodeBy18IdCard(a_idCard) {
 var sum = 0; // 声明加权求和变量
 if (a_idCard[17].toLowerCase() == 'x') {
  a_idCard[17] = 10;// 将最后位为x的验证码替换为10方便后续操作
 }
 for ( var i = 0; i < 17; i++) {
  sum += Wi[i] * a_idCard[i];// 加权求和
 }
 valCodePosition = sum % 11;// 得到验证码所位置
 if (a_idCard[17] == ValideCode[valCodePosition]) {
  return true;
 } else {
  return false;
 }
}
/**
 * 通过身份证判断是男是女
 * @param idCard 15/18位身份证号码
 * @return 'female'-女、'male'-男
 */
function maleOrFemalByIdCard(idCard){
 idCard = trim(idCard.replace(/ /g, ""));// 对身份证号码做处理。包括字符间有空格。
 if(idCard.length==15){
  if(idCard.substring(14,15)%2==0){
   return 'female';
  }else{
   return 'male';
  }
 }else if(idCard.length ==18){
  if(idCard.substring(14,17)%2==0){
   return 'female';
  }else{
   return 'male';
  }
 }else{
  return null;
 }
// 可对传入字符直接当作数组来处理
// if(idCard.length==15){
// alert(idCard[13]);
// if(idCard[13]%2==0){
// return 'female';
// }else{
// return 'male';
// }
// }else if(idCard.length==18){
// alert(idCard[16]);
// if(idCard[16]%2==0){
// return 'female';
// }else{
// return 'male';
// }
// }else{
// return null;
// }
}
 /**
  * 验证18位数身份证号码中的生日是否是有效生日
  * @param idCard 18位书身份证字符串
  * @return
  */
function isValidityBrithBy18IdCard(idCard18){
 var year =  idCard18.substring(6,10);
 var month = idCard18.substring(10,12);
 var day = idCard18.substring(12,14);
 var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
 // 这里用getFullYear()获取年份,避免千年虫问题
 if(temp_date.getFullYear()!=parseFloat(year)
       ||temp_date.getMonth()!=parseFloat(month)-1
       ||temp_date.getDate()!=parseFloat(day)){
        return false;
 }else{
  return true;
 }
}
  /**
   * 验证15位数身份证号码中的生日是否是有效生日
   * @param idCard15 15位书身份证字符串
   * @return
   */
  function isValidityBrithBy15IdCard(idCard15){
   var year =  idCard15.substring(6,8);
   var month = idCard15.substring(8,10);
   var day = idCard15.substring(10,12);
   var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
   // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
   if(temp_date.getYear()!=parseFloat(year)
        ||temp_date.getMonth()!=parseFloat(month)-1
        ||temp_date.getDate()!=parseFloat(day)){
         return false;
  }else{
   return true;
  }
  }
//去掉字符串头尾空格
function trim(str) {
 return str.replace(/(^/s*)|(/s*$)/g, "");
}