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

本文实例总结了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>

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • JS正则表达式验证中文字符

    正则表达式:"^[\u4e00-\u9fa5]{0,}$" . "/^[\u4E00-\u9FA5]{1,5}$/" 的含义: 在JS里,\uXXXX 是转义字符,"XXXX"对应的是16进制Unicode编码: ^ 匹配一行的开始.例如正则表达式^123能够匹配字符串"12345"的开始,但是不能匹配"012345": [\u4e00-\u9fa5] 指匹配在这两个Unicode编码之间的字符; {0,}

  • JavaScript正则表达式验证中文实例讲解

    JavaScript经常会验证中文,这里提供两个例子: Javascript代码: 复制代码 代码如下: /** *A simple example */ function ischinese(temp){ var re = /[^u4e00-u9fa5]/; if(re.test(temp)) return false; return true; } <p>/** *校验字符串是否为中文 *返回值: *如果为空,定义校验通过, 返回true *如果字串为中文,校验通过, 返回true *如果

  • javascript中验证大写字母、数字和中文

    复制代码 代码如下: var reg = /^[u4E00-u9FA5]+$/; //验证中文 var cp=$("input[name='cpid']").val(); for(var i=0;i<cp.length;i++){ var cpp=cp.charAt(i); if(!reg.test(cpp)||cpp.match(/^([A-Z])+$/)||cpp.match(/^\d+$/)){ //验证大写字母,数字和中文 document.getElementById(

  • JS验证逗号隔开可以是中文字母数字

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var refid='dasdasd,dadsad'; var reg =/^([\u0391-\uFFE5\d\w,])*([\u0391-\uFFE5\d\w]+)$/; if(refid != "") { if(reg.exec(refid)) { alert('验证通过'); }else { alert('验证失败'); } }

  • JS验证input输入框(字母,数字,符号,中文)

    只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

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

    本文实例总结了JS表单验证方法.分享给大家供大家参考,具体如下: 回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改: 包含页: Check-Form.js 代码如下: //规则检查排序 function RegCheck(objs) { var str = objs.checktype; switch (str) { case "cn" : //要检查的表单控件的输入类型必须为中文 return CnWordRegCheck(obj

  • jquery validate.js表单验证入门实例(附源码)

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • CodeIgniter表单验证方法实例详解

    本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform.php <html> <head> <title>My Form</title> </head> <body> <?php echo $this->validation->error_string;?> <

  • js 表单验证方法(实用)

    //下面验证的是长度 function checkTextLen(textId){ var len = 0; var checkField=document.getElementById(textId); var inputstring = checkField.value; var string_length = inputstring.length; if (string_length == 0) { return 0; } for (var i=0;i<string_length;i++)

  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立

  • js表单验证实例讲解

    本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证. 被JavaScript 验证的这些典型的表单数据有: 1).用户是否已填写表单中的必填项目? 2).用户输入的邮件地址是否合法? 3).用户是否已输入合法的日期? 4).用户是否在数据域 (numeric field) 中输入了文本? gspan.html <html> <head> <title>表单验证实例</

  • bootstrapValidator.min.js表单验证插件

    本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下 注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可. 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

  • vee-validate vue 2.0自定义表单验证的实例

    亲测可用 学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则. 一.安装 您可以通过npm或通过CDN安装此插件. 1. NPM npm install vee-validate --save 2. CDN <script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <

  • jQuery完成表单验证的实例代码(纯代码)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"

随机推荐