JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】


Posted in Javascript onFebruary 14, 2017

本文实例总结了JS表单验证方法。分享给大家供大家参考,具体如下:

回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改:

包含页: Check-Form.js

代码如下:

//规则检查排序
function RegCheck(objs)
{
 var str = objs.checktype;
 switch (str)
  {
    case "cn" :  //要检查的表单控件的输入类型必须为中文
     return CnWordRegCheck(objs);
     break;
    case "idnum" :
     return IdCardRegCheck(objs); //要检查的表单控件的输入类型必须为身份证号
     break;
  case "num" :  //要检查的表单控件的输入类型必须为数字
      return NumRegCheck(objs);
   break;
  case "mail" :  //要检查的表单控件的输入类型必须为EMAIL
     return EmailRegCheck(objs);
     break;
  case "txt" :  //要检查的表单控件的输入类型必须为字符串
   return SpecialWordRegCheck(objs);
   break;
  case "notes" :
   return true; //要检查的表单控件的输入类型必须为什么都可以
   break;
  }
}
//************************************************
//检查电话号码
function NumRegCheck(obj)
{
 var uplimit = obj.checkrule.split(",")[0];
 var downlimit = obj.checkrule.split(",")[1];
 var reg = "";
 if (downlimit == null)
  {
   reg = eval_r("/^[0-9]{"+uplimit+"}$/");
  }
 else
  {
   reg = eval_r("/^[0-9]{"+uplimit+","+downlimit+"}$/");
  }
 var str = obj.value;
 var flag = reg.test(str);
 return flag;
}
//************************************************
//检查身份证号
function IdCardRegCheck(obj)
{
 var str = obj.value;
 var reg = /^([0-9]{15}|[0-9]{18})$/;
 var flag = reg.test(str);
 return flag;
}
//************************************************
//检查EMAIL
function EmailRegCheck(obj)
{
 var str = obj.value;
 var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
 var flag = reg.test(str);
 return flag;
}
//***************************************
//检查中文输入
function CnWordRegCheck(obj)
{
 var str = obj.value;
 var reg=/^[\u4e00-\u9fa5](\s*[\u4e00-\u9fa5])*$/;
 var flag = reg.test(str);
 //alert(flag);
 return flag;
}
//***************************************
//检查特殊字符
function SpecialWordRegCheck(obj)
{
 var reg= /[(\/)(<)(>)]/g">\\)(')(")(<)(>)]/g;
 var str = obj.value;
 var flag= reg.test(str);
 flag = !flag;
 return flag;
}
//************************************************
//检查主引导函数
function CheckForm(obj)
{
 var myform = eval_r("document."+obj.name);
 for (i=0;i<myform.elements.length;i++)
  {
  var formvalue = myform.elements[i].value;
  //内容非空检查,长度检查
  if ((myform.elements[i].value == "")||(myform.elements[i].value.length>myform.elements[i].maxlength))
   {
   alert("您忘了填写"+myform.elements[i].cnname+"!"+"或者您填写的信息不符合规范!");
   myform.elements[i].focus();
   return false;
   break;
   }
   if (myform.elements[i].value == 0)
   {
   alert("您忘了选择"+myform.elements[i].cnname+"!");
   myform.elements[i].focus();
   return false;
   break;
   }
  //数据规范化检查
  var myobj = myform.elements[i];
  //alert(myobj.checktype);
  //break;
  if (!RegCheck(myobj))
   {
   alert(myobj.cnname+"输入有误,请按填写要求填写!");
    myobj.focus();
   return false;
   break;
   }
  }
}

附:js身份证号码严格验证

<script>
function checkIdcard(idcard){
var Errors=new Array(
"验证通过!",
"身份证号码位数不对!",
"身份证号码出生日期超出范围或含有非法字符!",
"身份证号码校验错误!",
"身份证地区非法!"
);
var area={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:"国外"}
var idcard,Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
//地区检验
if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4];
//身份号码位数及格式检验
switch(idcard.length){
case 15:
if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性
} else {
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
}
if(ereg.test(idcard)) return Errors[0];
else return Errors[2];
break;
case 18:
//18位身份号码检测
//出生日期的合法性检查
//闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
//平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
} else {
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
}
if(ereg.test(idcard)){//测试出生日期的合法性
//计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7
+ (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9
+ (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10
+ (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5
+ (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8
+ (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4
+ (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2
+ parseInt(idcard_array[7]) * 1
+ parseInt(idcard_array[8]) * 6
+ parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);//判断校验位
if(M == idcard_array[17]) return Errors[0]; //检测ID的校验位
else return Errors[3];
}
else return Errors[2];
break;
default:
return Errors[1];
break;
}
}
alert(checkIdcard("220183198808081610"))
</script>
Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Vue.js表单控件实践
Oct 27 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
canvas实现十二星座星空图
Feb 14 #Javascript
JavaScript省市级联下拉菜单实例
Feb 14 #Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 #Javascript
jQuery实现用户输入自动完成功能
Feb 13 #Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 #Javascript
微信小程序 this和that详解及简单实例
Feb 13 #Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
介绍一些PHP判断变量的函数
2012/04/24 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python获取文件扩展名的方法
2015/07/06 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python中的json总结
2018/10/11 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python里dict变成list实例方法
2019/06/26 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
语文教学感言
2014/02/06 职场文书
员工离职感谢信
2015/01/22 职场文书
会议通知
2015/04/15 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技