老师最后提交重新验证那一块怎么做啊
来源：4-8 编程练习
人间第一流
2020-01-22 15:43:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
width:800px;
height:40px;
background-color:#00BFFF;
font-size:25px;
color:#F8F8FF;
line-height:40px;
text-indent:25px;
margin:0 auto;
}
.warp{
width:800px;
margin:0 auto;
background-color:#DCDCDC;
}
.con{
padding-top:60px;
width:500px;
height:500px;
margin:0 auto;
font-size:20px;
color:#2F4F4F;
}
.con span{
display:inline-block;
width:100px;
text-align:right;
margin-left: 50px;
}
.sel{
width:165px;
}
.btn{
background-color:#00BFFF;
width:60px;
height:30px;
border-radius:5px;
margin-top:40px;
margin-left:135px ;
}
.tip{
color:red;
font-size:10px;
}
</style>
</head>
<body>
<header>用户注册</header>
<div class="warp">
<div class="con">
<span>用户名:</span><input type="text"><span class="tip"></span><br/>
<span>密码:</span><input type="text"><span class="tip"></span><br/>
<span>确认密码:</span><input type="text"><span class="tip"></span><br/>
<span>姓名:</span><input type="text"><span class="tip"></span><br/>
<span>性别:</span><select class="sel">
<option></option>
<option value="man">男</option>
<option value="women">女</option>
</select><br/>
<span>身份证号:</span><input type="text"><span class="tip"></span><br/>
<span>邮箱:</span><input type="text"><span class="tip"></span><br/>
<span>手机号码:</span><input type="text"><span class="tip"></span><br/>
<input class="btn" type="button" value="提交">
</div>
</div>
<script>
var input=document.getElementsByTagName("input");
var tip=document.getElementsByClassName("tip");
var btn=document.getElementsByClassName("btn");
input[0].onblur=function(){
if(/^[a-z]\w{5,30}/.test(input[0].value)){
tip[0].innerHTML="ok";
}else{
tip[0].innerHTML="用户名输入错误";
}
}
input[1].onblur=function(){
if(/^\S{6,18}$/.test(input[1].value)){
tip[1].innerHTML="ok";
}else{
tip[1].innerHTML="密码6-18位，包括数字字母或符号，中间不能有空格";
}
}
input[2].onblur=function(){
if(input[1].value==input[2].value){
tip[2].innerHTML="ok";
}else{
tip[2].innerHTML="两次输入密码不一致";
}
}
input[3].onblur=function(){
if(/^[\u4e00-\u9fa5]{2,4}$/.test(input[3].value)){
tip[3].innerHTML="ok";
}else{
tip[3].innerHTML="要求真实姓名，两位到四位的中文汉字";
}
}
input[4].onblur=function(){
if(/^\d{17}[\d|x]|\d{15}$/.test(input[4].value)){
tip[4].innerHTML="ok";
}else{
tip[4].innerHTML="身份证号为15位或18位数字";
}
}
input[5].onblur=function(){
if(/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(input[5].value)){
tip[5].innerHTML="ok";
}else{
tip[5].innerHTML="邮箱格式不正确";
}
}
input[6].onblur=function(){
if(/^0?(13|14|15|18|17)[0-9]{9}/.test(input[6].value)){
tip[6].innerHTML="ok";
}else{
tip[6].innerHTML="手机号码格式不正确";
}
}
btn.onclick=function(){
}
</script>
</body>
</html>
1回答
-
同学你好，每个验证可以设置变量标志，默认为false，验证成功之后改为true。在按钮点击事件中进行判断每个标志值，如果全部都是true的话，弹出验证信息。参考：
元素要获取一个：
设置变量标志：
后面几个验证自己添加一下。在点击事件中判断：
代码中的问题：
1、提示语句元素宽度可以设置大一些，否则文字会换行显示，不美观
2、建议密码中判断不为空的判断，否则两次都不输入，第二次判断就是正确的。
3、所有验证都建议添加上结尾$，否则部分字符多输入也会验证成功。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题