js配合正则实现各种验证（邮箱，手机号，生日，身份证号等）
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <title>用户注册</title> <style type="text/css"> body { background-color: rgb(177, 208, 224); font: normal 12px Trebuchet MS; color: #000; }
.roundedCorners { width: 350px; padding: 10px; background: #58bc58; box-shadow: 0px 0px 10px 0px #888888; border: 1px solid #DDEEF6; border-radius: 6px; margin: auto; }
.roundedCorners-textbox { border: 1px solid #999; width: 250px; }
.checkbox { margin-left: 30px; border: 1px solid #999; width: 20px; }
.label { display: inline-block; width: 50px; text-align: center; }
.default { color: grey; font-size: 12px; }
.input { color: grey; font-size: 12px; } </style> </head> <script> window.onload = function () { /* 表单提交是默认行为 * preventDefault() * returnValue = false; 知识点： * 正则表达式的方法 * reg.test(str)：用正则表达式reg验证str是否合法 * exec() 等同于 match * 分组：() * 引用 * 正则内引用：\n \1,\2 * 正则外引用：$n $1,$2 * 非： * ^ * [^\d] * 表示所有字符：[\s\S],[\w\W],[\d\D] */ var btnCheck = document.getElementById('btnCheck'); btnCheck.onclick = function (e) { /* 如果以下表单有一个不符合，则不允许提交表单 */
e = e || window.event;
/* 验证账号 * 不能为空， * 不能使用特殊字符（数字、字母、下划线、横杠）开头， * 必须以字母开头， * 长度6-20 */ var username = document.getElementById('username').value; if (!/^[a-z][\w\-]{5,19}$/.test(username)) { alert('您输入的用户名不合法');
// e.preventDefault(); // return; return false; }
//昵称只能输入中文 var nickname = document.getElementById('nickname').value; if (!/^[\u2E80-\u9FFF]+$/.test(nickname)) { alert('昵称必须为中文'); return false; }
/* 电子邮件 jinrong.xie@qq.com 123@qq.com x_x@163.com x-x@a-r.com.cn x.x@laoxie.com 邮箱用户名必须3-30个字符 */ var email = document.getElementById('email').value; if (!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) { alert('邮箱格式错误'); return false; }
/* 身份证 18/15 445655 19900707 2165 445655 19900707 211x */ var identity = document.getElementById('identity').value; if (!/^(\d{17}|\d{14})[\dx]$/.test(identity)) { alert('身份证格式错误'); return false; }
/* 手机号码 11位 158 8888 8888 1 [34578] */ var phone = document.getElementById('phone').value; if (!/^1[3-9]\d{9}$/.test(phone)) { alert('手机号错误'); return false; }
/* 生日 1999/05/08 1999-5-8 19990508 1999-05/08 不合法 199905 引用分组 * 正则内：\n * 正则外:$n 分组顺序：以左括号出现的顺序为分组顺序 */
var birthday = document.getElementById('birthday').value; if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) { alert('生日格式错误'); return false; }
/* 密码 长度6-20 不能包含空格 */ var password = document.getElementById('password').value; if (!/^\S{6,20}$/.test(password)) { alert('密码禁止空格'); return false; }
var confirm_pwd = document.getElementById('confirm_pwd').value; if (confirm_pwd != password) { alert('两次输入密码不一致，请你仔细看看'); return false; }
}
// 根据身份自动写入生日 document.getElementById('identity').onblur = function () { // 445655199007072165 var res = this.value.match(/\d{6}(\d{8})\d{4}/); if (res) { res = res[1]; } document.getElementById('birthday').value = res; } } </script>
<body> <form id="myform" action="05success.html" method="get"> <div class="roundedCorners"> <label class="label">账号</label> <input id="username" name="username" type="text" placeholder="用户名长度为6-20，禁止特殊字符" class="default roundedCorners-textbox" /> <br /> <br /> <label class="label">昵称</label> <input id="nickname" name="nickname" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">电子邮件</label> <input id="email" name="email" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">身份证</label> <input id="identity" name="identity" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">手机号码</label> <input id="phone" name="phone" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">生日</label> <input id="birthday" name="birthday" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">密码</label> <input id="password" name="password" type="password" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">确认密码</label> <input id="confirm_pwd" name="confirm_pwd" type="text" class="roundedCorners-textbox" /> <br /> <br /> <input type="checkbox" class="checkbox" /> <label>10天内免登陆</label> <br/> <br/>
<input type="submit" id="btnCheck" value="确定" />
<input type="reset" value="清空" /> </div> </form>
</body>
</html>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄
<head> <meta charset="utf-8" /> <title>用户注册</title> <style type="text/css"> body { background-color: rgb(177, 208, 224); font: normal 12px Trebuchet MS; color: #000; }
.roundedCorners { width: 350px; padding: 10px; background: #58bc58; box-shadow: 0px 0px 10px 0px #888888; border: 1px solid #DDEEF6; border-radius: 6px; margin: auto; }
.roundedCorners-textbox { border: 1px solid #999; width: 250px; }
.checkbox { margin-left: 30px; border: 1px solid #999; width: 20px; }
.label { display: inline-block; width: 50px; text-align: center; }
.default { color: grey; font-size: 12px; }
.input { color: grey; font-size: 12px; } </style> </head> <script> window.onload = function () { /* 表单提交是默认行为 * preventDefault() * returnValue = false; 知识点： * 正则表达式的方法 * reg.test(str)：用正则表达式reg验证str是否合法 * exec() 等同于 match * 分组：() * 引用 * 正则内引用：\n \1,\2 * 正则外引用：$n $1,$2 * 非： * ^ * [^\d] * 表示所有字符：[\s\S],[\w\W],[\d\D] */ var btnCheck = document.getElementById('btnCheck'); btnCheck.onclick = function (e) { /* 如果以下表单有一个不符合，则不允许提交表单 */
e = e || window.event;
/* 验证账号 * 不能为空， * 不能使用特殊字符（数字、字母、下划线、横杠）开头， * 必须以字母开头， * 长度6-20 */ var username = document.getElementById('username').value; if (!/^[a-z][\w\-]{5,19}$/.test(username)) { alert('您输入的用户名不合法');
// e.preventDefault(); // return; return false; }
//昵称只能输入中文 var nickname = document.getElementById('nickname').value; if (!/^[\u2E80-\u9FFF]+$/.test(nickname)) { alert('昵称必须为中文'); return false; }
/* 电子邮件 jinrong.xie@qq.com 123@qq.com x_x@163.com x-x@a-r.com.cn x.x@laoxie.com 邮箱用户名必须3-30个字符 */ var email = document.getElementById('email').value; if (!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) { alert('邮箱格式错误'); return false; }
/* 身份证 18/15 445655 19900707 2165 445655 19900707 211x */ var identity = document.getElementById('identity').value; if (!/^(\d{17}|\d{14})[\dx]$/.test(identity)) { alert('身份证格式错误'); return false; }
/* 手机号码 11位 158 8888 8888 1 [34578] */ var phone = document.getElementById('phone').value; if (!/^1[3-9]\d{9}$/.test(phone)) { alert('手机号错误'); return false; }
/* 生日 1999/05/08 1999-5-8 19990508 1999-05/08 不合法 199905 引用分组 * 正则内：\n * 正则外:$n 分组顺序：以左括号出现的顺序为分组顺序 */
var birthday = document.getElementById('birthday').value; if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) { alert('生日格式错误'); return false; }
/* 密码 长度6-20 不能包含空格 */ var password = document.getElementById('password').value; if (!/^\S{6,20}$/.test(password)) { alert('密码禁止空格'); return false; }
var confirm_pwd = document.getElementById('confirm_pwd').value; if (confirm_pwd != password) { alert('两次输入密码不一致，请你仔细看看'); return false; }
}
// 根据身份自动写入生日 document.getElementById('identity').onblur = function () { // 445655199007072165 var res = this.value.match(/\d{6}(\d{8})\d{4}/); if (res) { res = res[1]; } document.getElementById('birthday').value = res; } } </script>
<body> <form id="myform" action="05success.html" method="get"> <div class="roundedCorners"> <label class="label">账号</label> <input id="username" name="username" type="text" placeholder="用户名长度为6-20，禁止特殊字符" class="default roundedCorners-textbox" /> <br /> <br /> <label class="label">昵称</label> <input id="nickname" name="nickname" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">电子邮件</label> <input id="email" name="email" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">身份证</label> <input id="identity" name="identity" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">手机号码</label> <input id="phone" name="phone" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">生日</label> <input id="birthday" name="birthday" type="text" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">密码</label> <input id="password" name="password" type="password" class="roundedCorners-textbox" /> <br /> <br /> <label class="label">确认密码</label> <input id="confirm_pwd" name="confirm_pwd" type="text" class="roundedCorners-textbox" /> <br /> <br /> <input type="checkbox" class="checkbox" /> <label>10天内免登陆</label> <br/> <br/>
<input type="submit" id="btnCheck" value="确定" />
<input type="reset" value="清空" /> </div> </form>
</body>
</html>
更多精彩
