老师，辛苦检查下正则是否合理，结构需要修改否？
来源：4-8 编程练习
慕设计8213676
2019-06-06 18:10:38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火车票注册验证正则</title>
<style type="text/css">
/* 公共样式 */
*{
margin: 0;
padding: 0;
font-size: 14px;
color: #666;
font-family: "microsoft yahei";
}
/* 最外层大盒子 */
.wrap {
width: 1000px;
height: 600px;
margin: 0 auto;
background-color: #eee;
}
/* 用户注册标题 */
.wrap > h4 {
width: 100%;
height: 30px;
line-height: 30px;
text-indent: 1em;
font-weight: normal;
font-size: 16px;
color: #fff;
background-color: #3092d1;
}
/* 表格盒子 */
.form-box {
width: 60%;
height: auto;
margin: 50px auto;
}
/* 表格公共样式 */
.contents{
margin-bottom:20px;
}
.item-1{
display: inline-block;
width: 120px;
text-align: right;
margin-right: 15px;
}
.item-2{
margin-left: 10px;
font-size: 12px;
color: red;
}
.gender{
width: 160px;
}
/* 提交按钮 */
.btn{
width: 72px;
height: 37px;
margin: 60px 625px 60px 175px;
}
.btn > .btn-item{
width: 100%;
height: 100%;
text-align: center;
line-height: 16px;
color: #fff;
background-color: #2375ba;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="wrap">
<h4>用户注册</h4>
<div class="form-box">
<div class="contents">
<span class="item-1">用户名:</span>
<input type="text" class="nickName-text">
<span class="item-2 nickName"></span>
</div>
<div class="contents">
<span class="item-1">登录密码:</span>
<input type="password" class="userPass-text">
<span class="item-2 userPass"></span>
</div>
<div class="contents">
<span class="item-1">确认密码:</span>
<input type="password" class="userPassWord-text">
<span class="item-2 userPassWord"></span>
</div>
<div class="contents">
<span class="item-1">姓名:</span>
<input type="text" class="userName-text">
<span class="item-2 userName"></span>
</div>
<div class="contents">
<span class="item-1">性别:</span>
<select class="gender">
<option value ="male">男</option>
<option value ="female">女</option>
</select>
</div>
<div class="contents">
<span class="item-1">身份证号码:</span>
<input type="text" class="idenTityID-text">
<span class="item-2 idenTityID"></span>
</div>
<div class="contents">
<span class="item-1">邮箱:</span>
<input type="email" class="mailbox-text">
<span class="item-2 mailbox"></span>
</div>
<div class="contents">
<span class="item-1">手机号码:</span>
<input type="tel" class="phone-text">
<span class="item-2 phone"></span>
</div>
<!-- 提交按钮 -->
<div class="btn">
<button type="button" class="btn-item">提交</button>
</div>
</div>
</div>
<script type="text/javascript">
//火车票注册验证正则模块
(function(){
//封装获取元素的函数
var getSelector = function(selector){
return document.querySelector(selector);
};
//获取输入框的元素
var textBox = {
nickNameText : getSelector(".nickName-text"),
userPassText : getSelector(".userPass-text"),
userPassWordText : getSelector(".userPassWord-text"),
userNameText : getSelector(".userName-text"),
idenTityIDText : getSelector(".idenTityID-text"),
mailboxText : getSelector(".mailbox-text"),
phoneText : getSelector(".phone-text"),
btnItem : getSelector(".btn-item")
};
//获取提示框的元素
var tipsBox = {
nickName : getSelector(".nickName"),
userPass : getSelector(".userPass"),
userPassWord : getSelector(".userPassWord"),
userName : getSelector(".userName"),
idenTityID : getSelector(".idenTityID"),
mailbox : getSelector(".mailbox"),
phone : getSelector(".phone")
};
//正则表达式
var RegExps = {
REnickName : /^[A-Z|a-z]\w{5,19}$/,
REuserPass : /^[^\s]{6,18}$/,
REuserName : /^[\u4e00-\u9fa5]{2,4}$/,
REidenTityID : /(?:^\d{15}$)|(?:^\d{17}\d|x|X$)/,
REmailbox : /^\w+(?:\w)*@\w+\.(?:\w\.)*[a-z]{2,4}$/,
REphone : /^1[3458]\d{9}$/
};
//用户名验证
textBox.nickNameText.onblur = function(){
RegExps.REnickName;
if(RegExps.REnickName.test(this.value)){
tipsBox.nickName.innerHTML = "ok";
}else{
tipsBox.nickName.innerHTML = "6-20位字母、数字或'_',字母开头";
}
}
//登录密码验证
textBox.userPassText.onblur = function(){
RegExps.REuserPass;
if(RegExps.REuserPass.test(this.value)){
tipsBox.userPass.innerHTML = "ok";
}else{
tipsBox.userPass.innerHTML = "6-18位,数字字母或符号,中间不能有空格";
}
}
//确认密码验证
textBox.userPassWordText.onblur = function(){
RegExps.REuserPass;
if(RegExps.REuserPass.test(textBox.userPassText.value)){
if(textBox.userPassWordText.value === textBox.userPassText.value){
tipsBox.userPassWord.innerHTML = "ok";
}else{
tipsBox.userPassWord.innerHTML = "两次输入密码不一致";
}
}else{
tipsBox.userPassWord.innerHTML = "请设置登录密码";
}
}
//姓名验证
textBox.userNameText.onblur = function(){
RegExps.REuserName;
if(RegExps.REuserName.test(this.value)){
tipsBox.userName.innerHTML = "ok";
}else{
tipsBox.userName.innerHTML = "两位到四位的中文";
}
}
//身份证验证
textBox.idenTityIDText.onblur = function(){
RegExps.REidenTityID;
if(RegExps.REidenTityID.test(this.value)){
tipsBox.idenTityID.innerHTML = "ok";
}else{
tipsBox.idenTityID.innerHTML = "请输入18位的身份证号码";
}
}
//邮箱验证
textBox.mailboxText.onblur = function(){
RegExps.REmailbox;
if(RegExps.REmailbox.test(this.value)){
tipsBox.mailbox.innerHTML = "ok";
}else{
tipsBox.mailbox.innerHTML = "邮箱格式不正确";
}
}
//手机号码验证
textBox.phoneText.onblur = function(){
RegExps.REphone;
if(RegExps.REphone.test(this.value)){
tipsBox.phone.innerHTML = "ok";
}else{
tipsBox.phone.innerHTML = "电话格式不正确";
}
}
//提交按钮验证
textBox.btnItem.onclick = function(){
if(tipsBox.nickName.innerHTML == "ok" &&
tipsBox.userPass.innerHTML == "ok" &&
tipsBox.userPassWord.innerHTML == "ok" &&
tipsBox.userName.innerHTML == "ok" &&
tipsBox.idenTityID.innerHTML == "ok" &&
tipsBox.mailbox.innerHTML == "ok" &&
tipsBox.phone.innerHTML == "ok"){
alert("验证成功");
}else{
textBox.nickNameText.onblur();
textBox.userPassText.onblur();
textBox.userPassWordText.onblur();
textBox.userNameText.onblur();
textBox.idenTityIDText.onblur();
textBox.mailboxText.onblur();
textBox.phoneText.onblur();
}
}
})();
</script>
</body>
</html>
1回答
-
同学你好！
测试了下，身份证的正则有一些问题：输入超出18位还是会ok
可修改：（正则写法多样，如果同学还有什么更好的写法都可以使用~）
可优化：手机号码的正则这样写应该会清楚一些，按照手机号码的开头分类：
/^(13)[0-9]{9}|(147)[0-9]{8}|(15)[0,1,2,3,5,6,7,8,9]{1}[0-9]{8}|(18)[0,2,5,6,7,8,9]{1}[0-9]{8}$/
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题