现在有许多项目,都需要填写一些详细的东西,比如手机号,身份证号等,一般小项目的话,不需要那么严谨,简单的判断一下就好,这时候就用到js了,先来看一下效果,然后再上源代码
运行,是这样一个页面
我们先随便输入一串数字,看看是什么效果
然后我们再输入一个正确的手机号
在把其中一个数字换成字母试试
通过实验来看,还是蛮好用的,关键代码简洁易懂
来看一下代码
<!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=utf-8" /> <title>无标题文档</title> </head> <body style="text-align:center"> 手机号:<input type="text" class="loginuser" placeholder="请输入您的手机号" id="uid" onblur="checkPhone()" /> <span id="uidt" style="margin-left: 100px; color:#F00"></span> </body> <script> function checkPhone(){ var phone = document.getElementById('uid').value; if(!(/^1[34578]d{9}$/.test(phone))){ return document.getElementById('uidt').innerHTML = '请输入正确的手机号'; return false; } else{return document.getElementById('uidt').innerHTML = 'ok';} } </script> </html>
看完了手机号验证,接下来再来看身份证号
还是先看效果
打开页面是这样的
然后还是随便输上一串数字
会显示身份证非法
再随便输一个和我身份证相似的身份证号
格式一样,位数也一样,但是身份证号还是非法
填一个 正确的试试
点击提交
那个正确的会以get方式提交
感兴趣的也可以自己试一下,还是挺好用的,下面来看一下代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 身份证号校验 </title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src="http://www.w3cschool.cc/try/demo_source/static/js/jquery.validate.js"> </script> <script type="text/javascript"> $(function () { $("#form1").validate({ rules: { txtIdCard: "isIdCard" } }); }); // 身份证号验证 function isIdCard(cardid) { //身份证正则表达式(18位) var isIdCard2 = /^[1-9]d{5}(19d{2}|[2-9]d{3})((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])(d{4}|d{3}X)$/i; var stard = "10X98765432"; //最后一位身份证的号码 var first = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //1-17系数 var sum = 0; if (!isIdCard2.test(cardid)) { return false; } var year = cardid.substr(6, 4); var month = cardid.substr(10, 2); var day = cardid.substr(12, 2); var birthday = cardid.substr(6, 8); if (birthday != dateToString(new Date(year+'/'+month+'/'+day))) {//校验日期是否合法 return false; } for (var i = 0; i < cardid.length - 1; i++) { sum += cardid[i] * first[i]; } var result = sum % 11; var last = stard[result]; //计算出来的最后一位身份证号码 if (cardid[cardid.length - 1].toUpperCase() == last) { return true; } else { return false; } } //日期转字符串 返回日期格式20080808 function dateToString(date) { if (date instanceof Date) { var year = date.getFullYear(); var month = date.getMonth() + 1; month = month < 10 ? '0' + month : month; var day = date.getDate(); day = day < 10 ? '0' + day : day; return year + month + day; } return ''; } // jquery validate身份证号验证 jQuery.validator.addMethod("isIdCard", function (value, element) { return this.optional(element) || (isIdCard(value)); }, "身份证号非法!"); </script> </head> <body> <form id="form1" method="get" action=""> 请输入身份证号: <input type="text" id="txtIdCard" name="txtIdCard" /> <p> <input class="submit" type="submit" value="提交" /> </p> </form> </body> </html>