提交按钮重新验证不会写，请老师辅导一下
来源：4-8 编程练习
上心4409406
2019-11-20 10:50:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#title{
background-color:#4169E1;
width: 1800px;
height: 30px;
color: #fff;
margin: 0 auto;
}
#content{
background-color:#D3D3D3;
width: 1800px;
height: 800px;
margin: 0 auto;
}
#content .fsz{
font-size: 6px;
text-align: left;
}
#content table{
margin: 0 auto;
line-height: 50px;
text-align: right;
}
#content .select{
width: 100%;
}
#content #btn{
display: block;
margin: 0 auto;
background-color: #4169E1;
width: 60px;
height: 40px;
border-radius: 5px;
margin-top: 30px;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div id="title">用户注册</div>
<div id="content">
<form>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="userId"></td>
<td class="userIdTip fsz"></td>
</tr>
<tr>
<td>登陆密码：</td>
<td><input type="password" id="userPwd"></td>
<td class="userPwdTip fsz"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="confirmPwd"></td>
<td class="confirmPwdTip fsz"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" id="userName"></td>
<td class="userNameTip fsz"></td>
</tr>
<tr>
<td>性别：</td>
<td><select class="select"><option value="man">男</option><option value="woman">女</option></select></td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="idCard"></td>
<td class="idCardTip fsz"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email"></td>
<td class="emailTip fsz"></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" id="mob"></td>
<td class="mobTip fsz"></td>
</tr>
</table>
<button id="btn">提交</button>
</form>
</div>
</div>
<script type="text/javascript">
//获取DOM元素
var wrapElem = document.querySelector('#wrap');
var formElem = {
userId : wrapElem.querySelector('#userId'),
userPwd : wrapElem.querySelector('#userPwd'),
confirmPwd : wrapElem.querySelector('#confirmPwd'),
userName : wrapElem.querySelector('#userName'),
idCard : wrapElem.querySelector('#idCard'),
email : wrapElem.querySelector('#email'),
mob : wrapElem.querySelector('#mob'),
userIdTip : wrapElem.querySelector('.userIdTip'),
userPwdTip : wrapElem.querySelector('.userPwdTip'),
confirmPwdTip : wrapElem.querySelector('.confirmPwdTip'),
userNameTip : wrapElem.querySelector('.userNameTip'),
idCardTip : wrapElem.querySelector('.idCardTip'),
emailTip : wrapElem.querySelector('.emailTip'),
mobTip : wrapElem.querySelector('.mobTip'),
btn : wrapElem.querySelector('#btn')
}
//储存正则表达式
var regexp = {
patuserId : /^[a-z]\w{5,19}$/, //验证用户名
patuserPwd : /^[^ \u4e00-\u9fa5]{6,18}$/, //验证密码
patuserName : /^[\u4e00-\u9fa5]{2,4}$/, //验证姓名
patidCard : /^\d{14,17}[0-9xX]$/, //验证身份证
patemail : /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, //验证邮箱
patmob : /^1(3|4|5|7|8)\d{9}$/ //验证手机号
}
//储存提示文本
var tip = {
userId : '用户名是6-20位字母、数字或“_”,字母开头',
userPwd : '密码6-18位，包括数字字母或符号，中间不能有空格',
confirmPwd : '两次输入密码不一致',
userName : '真实姓名，两位到四位的中文汉字',
idCard : '请输入正确的身份证号',
email : '请输入正确的邮箱',
mob : '请输入正确的手机号'
}
//验证
function verify(text,regexp,tip,tip1){
text.onblur = function (){
regexp.test(text.value) ? tip.innerHTML="OK" : tip.innerHTML=tip1;
}
}
verify(formElem.userId,regexp.patuserId,formElem.userIdTip,tip.userId);
verify(formElem.userPwd,regexp.patuserPwd,formElem.userPwdTip,tip.userPwd);
verify(formElem.userName,regexp.patuserName,formElem.userNameTip,tip.userName);
verify(formElem.idCard,regexp.patidCard,formElem.idCardTip,tip.idCard);
verify(formElem.email,regexp.patemail,formElem.emailTip,tip.email);
verify(formElem.mob,regexp.patmob,formElem.mobTip,tip.mob);
//验证第二次输入密码
formElem.confirmPwd.onblur=function(){
formElem.confirmPwd.value === formElem.userPwd.value ? formElem.confirmPwdTip.innerHTML = 'OK' : formElem.confirmPwdTip.innerHTML = tip.confirmPwd;
}
//提交按钮
formElem.btn.onclick = function(){
alert(1);
}
</script>
</body>
</html>
1回答
-
好帮手慕粉
2019-11-20
同学你好，关于同学的问题解答如下：
1、我们可以给每一个input输入框设置一个标记，当输入的内容合法时，就设置这个标记为true，当点击提交按钮时，对这些标记进行判断，如果全为true，则弹出验证通过。
2、提交按钮代码实现：
3、同学实现的界面不太美观，建议同学再调一下样式。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题