1、表单验证的场景与意义
1.1、降低服务器压力
拦截不合格数据，避免直接提交到服务器，可以显著降低服务器开销
1.2、提升用户体验
早期的互联网，表单项非常多，注册账号需要填写20+字段。而其中有一个填写不正确就需要等待几十秒。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段。现在虽然无刷新技术早已普及，但是只依赖服务端进行验证，还是会有几百毫秒的延迟，实际使用时会有一种很严重的粘滞感。
2、表单验证常用事件与属性
表单经常要做一些非空、长度、合法性验证。
<head><meta charset="UTF-8"><title>表单验证</title><script>function validateName(){//所有的表单项元素都是value属性var name=document.getElementById("userName").value;var msg=document.getElementById("nameMsg");if(name==null||name==""){msg.innerHTML="用户名不能为空！";msg.style.color="red";return false;}else if(name.length<6){msg.innerHTML="用户名长度必须为大于6的！";msg.style.color="red";return false;}msg.innerHTML="用户名可用";msg.style.color="green";return true;}function validatePwd(){var password1=document.getElementById("password1").value;var msg=document.getElementById("pwdMsg1");if(password1==null||password1==""){msg.innerHTML="密码不能为空!";msg.style.color="red";return false;}else if(password1.length<8){msg.innerHTML="密码长度必须大于等于8";msg.style.color="red";return false;}msg.innerHTML="密码合法";msg.style.color="green";return true;}function confirmPwd(){var pwd1=document.getElementById("password1").value;var pwd2=document.getElementById("password2").value;var msg=document.getElementById("pwdMsg2");if(pwd1!=pwd2){msg.innerHTML="两次输入的密码不一致！";msg.style.color="red";return false;}msg.innerHTML="两次输入的密码一致";msg.style.color="green";return true;}function validateGender(){var gender=document.getElementById("gender").value;if(gender==-1){alert("性别为必选项！");return false;}return true;}function register(){return validateName()&&validatePwd()&&confirmPwd()&&validateGender();}</script></head><body><h1>英雄会</h1><form action="1.html" method="get" onsubmit="return register()">*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" /><span id="nameMsg">用户名长度至少6位</span><br/>*密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" /><span id="pwdMsg1">密码长度至少8位</span><br/>*确认密码:<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" /><span id="pwdMsg2">确认密码与密码一致</span><br/>*性别:<select id="gender"><option value="-1">请选择性别</option><option value="0">女</option><option value="1">男</option></select><br/><button type="submit">注册</button><button type="reset">重置</button></form></body>
3、JavaScript的RegExp对象-正则表达式
3.1、概念
RegExp:正则表达式(regular expression)的简写
正则表达式(英语：Regular Expression,代码中常常简写为regex、regexp或RE)使用单个字符串来描述、匹配符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
3.2、语法
var reg=new RegExp(/正则表达式主体/,修饰符(可选));或者更简单的方法var reg=/正则表达式主体/修饰符(可选);案例:var reg=new RegExp(/kaikeba/i);var reg=/kaikeba/i;//此处定义了一个一个正则表达式kaikeba 是一个正则表达式主体(用于检索)i 是一个修饰符(搜索不区分大小写)
3.3 修饰符
可以在全局搜索中不区分大小写
3.4 正则表达式模式
方括号用于查找某个范围内字符。
元字符是拥有特殊含义的字符
量词：
3.5 正则表达式的方法test(str)
test()用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配文本，则返回true，否则返回false。
var reg=/kaikeba/i;var res=reg.test("开课吧的汉语拼音为kaikeba");console.log(res);//truevar reg=/^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;var str="a公司拼音为9";var res=reg.test(str);console.log(res);//trueconsole.log(reg.test("a你好239"));//false
4、 常用正则表达式
/* 检查输入的身份证号是否正确 */function checkCard(str){/*** 15位数身份证正则表达式：* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3为数字顺序码。* [1-9]\d{5} 前六位地区，非0打头* \d{2} 出生年份后两位00-99* ((0[1-9])|(10|11|12)) 月份，01-12月* (([0-2][1-9])|10|20|30|31) 日期，01-31天* \d{3} 顺序码三位，没有校验码*/if(str==null||(str.length!=15&&str.length!=18)){return false;}var arg1=/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;if(str.length==15&&!arg1.test(str)){return false;}/*** 18位数身份证正则表达式：* 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1位数字校验码(可为X)。* [1-9]\d{5} 前六位地区，非0打头* (18|19|([23]\d))\d{2} 出生年份，覆盖范围1800-3999年* ((0[1-9])|(10|11|12)) 月份，01-12月* (([0-2][1-9])|10|20|30|31) 日期，01-31天* \d{3}[0-9Xx] 顺序码三位+一位校验码*/var arg2=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;if(str.length==18 && !arg2.test(str)){return false;}return true;}/*是否是小数*/function isDecimal(strValue){var objRegExp=/^\d+\.\d+$/;return objRegExp.test(strValue);}/*校验是否中文名称组成*/function ischina(str){var reg=/^[\u4E00-\u9FA5]{2,4}$/;return reg.test(str);}/*检验是否全由8位数字组成*/function isNum(str){var reg=/^[0-9]{8}$/;return reg.test(str);}/*校验手机号*/function isPhoneNum(str){//如果你要精准验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的，验证比较精准。var reg=/^1[3|4|5|7|8][0-9]{9}$/;//如果因为现有号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11为并且以1开头。var reg=/^1[0-9]{10}$/;return reg.test(str);}/*检验右键地址是否合法*/function IsEmail(str){var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);}/*检查输入的URL地址是否正确*/function checkURL(str){if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i)==null){return false;}else{return true;}}
![JavaScript 表单验证正则表达式大全[推荐]](https://600zi.400zi.cn/uploadfile/img/3/395/b14042c32659a2e5659708e68569da06.jpg)
