老师，我验证输入框时出问题了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式-重复</title>
<style type="text/css">
.wrap{
width: 1200px;
height: auto;
margin: auto auto;
background-color: #eee;
overflow: hidden;
}
.wrap .top{
width: 100%;
height: 30px;
background-color: #0099CC;
margin-left:0;
padding: 0;
}
.wrap .top p{
color: #fff;
margin-left: 30px;
line-height: 30px;
margin:0;
padding-left: 30px;
}
.wrap #regexp{
width: 500px;
margin: 50px auto;
overflow: hidden;
}
.wrap #regexp .unify{
color: #999;
display: block;
margin-top: 30px;
}
.wrap #regexp .uniform{
width: 200px;
height: 20px;
resize: none;
vertical-align:middle;
}
.wrap #regexp #button{
width: 80px;
height: 40px;
border-radius: 5px;
background-color: #006699;
margin: 50px auto;
margin-top: 80px;
cursor:pointer;
margin-left: 150px;
}
.wrap #regexp #button p{
line-height: 40px;
text-align: center;
color: #fff;
}
.verification{
width: 280px;
color: red;
font-size: 12px;
text-align: left;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top"><p>用户注册</p></div>
<div id="regexp">
<p class="unify"> 用户名： <input type = "text" class="uniform" id="username"></input><span class="verification"></span></p>
<p class="unify"> 登录密码： <input type = "password" class="uniform" id="password"></input><span class="verification"></span></p>
<p class="unify"> 确认密码： <input type = "password" class="uniform" id="confirmPassword"></input><span class="verification"></span></p>
<p class="unify"> 姓名： <input type = "text" class="uniform" id="realName"></input><span class="verification"></span></p>
<p class="unify"> 性别： <select class="uniform" id="sex">
<option value="nan">男</option>
<option value="nv">女</option>
</select><span class = "verification"></span></p>
<p class="unify">身份证号码：<input type = "text" class="uniform" id="idNumber"></input><span class="verification"></span></p>
<p class="unify"> 邮箱： <input type = "text" class="uniform" id="email"></input><span class="verification"></span></p>
<p class="unify"> 手机号码： <input type = "text" class="uniform" id="phone"></input><span class="verification"></span></p>
<div id="button" ><p>提交</p></div>
</div>
</div>
<script>
var username = document.getElementById('username'),
password = document.getElementById('password'),
confirmPassword = document.getElementById('confirmPassword'),
realName = document.getElementById('realName'),
sex = document.getElementById('sex'),
idNumber = document.getElementById('idNumber'),
email = document.getElementById('email'),
phone = document.getElementById('phone'),
button = document.getElementById('button'),
veri = document.getElementsByClassName("verification");
var pattern = {
username:/^[a-z]\w{6,20}$/,
password:/^\S{6,16}&/,
confirmPassword:/^\S{6,16}&/,
realName:/^[\u4e00-\u9fa5]{2,4}$/,
idNumber:/^[0-9]{15}$|^[0-9]{18}$|^[0-9]{17}X$|^[0-9]{16}$/,
email:/(?:\w+\.)*\w+@(?:\w+\.)+[a-z]/i,
phone:/^13\d{9}$|^147\d{9}$|^15[0,1,2,3,4,6,7,8,9]{1}\d{8}$|^182\d{8}$|^18[5-9]\d{8}$|^180\d{8}$/
}
var allElem = [];
var flag = false,
flag1 = false,
flag2 = false,
flag3 = false,
flag4 = false,
flag5 = false,
flag6 = false;
username.onblur = function(){
if(username.value.match(pattern.username)){
veri[0].innerHTML = "OK";
flag = true;
}else{
veri[0].innerHTML = "请输入6-20位字母，数字下划线";
flag = false;
}
}
password.onblur = function(){
if(password.value.match(pattern.password)){
veri[1].innerHTML = "OK";
flag1 = true;
}else{
veri[1].innerHTML = "请设置密码";
flag1 = false;
}
}
confirmPassword.onblur = function(){
if(password.value == confirmPassword.value){
veri[2].innerHTML = "OK";
flag2 = true;
}else{
veri[2].innerHTML = "两次输入的密码不一致";
flag2 = false;
}
}
realName.onblur = function(){
if(realName.value.match(pattern.name)){
veri[3].innerHTML = "OK";
flag3 = true;
}else{
veri[3].innerHTML = "请输入2-4位汉字";
flag3 = false;
}
}
idNumber.onblur = function(){
if(idNumber.value.match(pattern.idNumber)){
veri[5].innerHTML = "OK";
flag4 = true;
}else{
veri[5].innerHTML = "请输入正确的身份证号码";
flag4 = false;
}
}
email.onblur = function(){
if(email.value.match(pattern.email)){
veri[6].innerHTML = "OK";
flag5 = true;
}else{
veri[6].innerHTML = "请输入正确的邮箱地址";
flag5 = false;
}
}
phone.onblur = function(){
if(phone.value.match(pattern.phone)){
veri[7].innerHTML = "OK";
flag6 = true;
}else{
veri[7].innerHTML = "请输入6-20位字母，数字下划线";
flag6 = false;
}
}
button.addEventListener("click",function(){
if(flag == true && flag1 == true && flag2 == true && flag3 == true && flag4 == true && flag5 == true && flag6 == true){
alert("成功");
}else{
alert("验证失败");
}
});
</script>
</body>
</html>老师，我输入正确也不提示ok，顺便再帮我看看有没有哪里需要改的地方
19
收起
正在回答
3回答
同学你好，关于同学的疑问，解答如下：
1、“用户名”验证时，输入6位验证不正确，是个数限制的问题，输入7位就可以正常验证了，如果要在输入6位时，提示正确，可以修改为5,19
2、登录密码验证：因为同学有个数限制，如下：
可以输入6位再测试下。祝学习愉快~
Redamancy_Y6
2020-03-18 11:20:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式-重复</title>
<style type="text/css">
.wrap{
width: 1200px;
height: auto;
margin: auto auto;
background-color: #eee;
overflow: hidden;
}
.wrap .top{
width: 100%;
height: 30px;
background-color: #0099CC;
margin-left:0;
padding: 0;
}
.wrap .top p{
color: #fff;
margin-left: 30px;
line-height: 30px;
margin:0;
padding-left: 30px;
}
.wrap #regexp{
width: 500px;
margin: 50px auto;
overflow: hidden;
}
.wrap #regexp .unify{
color: #999;
display: block;
margin-top: 30px;
}
.wrap #regexp .uniform{
width: 200px;
height: 20px;
resize: none;
vertical-align:middle;
}
.wrap #regexp #button{
width: 80px;
height: 40px;
border-radius: 5px;
background-color: #006699;
margin: 50px auto;
margin-top: 80px;
cursor:pointer;
margin-left: 150px;
}
.wrap #regexp #button p{
line-height: 40px;
text-align: center;
color: #fff;
}
.verification{
width: 280px;
color: red;
font-size: 12px;
text-align: left;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top"><p>用户注册</p></div>
<div id="regexp">
<p class="unify"> 用户名： <input type = "text" class="uniform" id="username"></input><span class="verification"></span></p>
<p class="unify"> 登录密码： <input type = "password" class="uniform" id="password"></input><span class="verification"></span></p>
<p class="unify"> 确认密码： <input type = "password" class="uniform" id="confirmPassword"></input><span class="verification"></span></p>
<p class="unify"> 姓名： <input type = "text" class="uniform" id="realName"></input><span class="verification"></span></p>
<p class="unify"> 性别： <select class="uniform" id="sex">
<option value="nan">男</option>
<option value="nv">女</option>
</select><span class = "verification"></span></p>
<p class="unify">身份证号码：<input type = "text" class="uniform" id="idNumber"></input><span class="verification"></span></p>
<p class="unify"> 邮箱： <input type = "text" class="uniform" id="email"></input><span class="verification"></span></p>
<p class="unify"> 手机号码： <input type = "text" class="uniform" id="phone"></input><span class="verification"></span></p>
<div id="button" ><p>提交</p></div>
</div>
</div>
<script>
var username = document.getElementById('username'),
password = document.getElementById('password'),
confirmPassword = document.getElementById('confirmPassword'),
realName = document.getElementById('realName'),
sex = document.getElementById('sex'),
idNumber = document.getElementById('idNumber'),
email = document.getElementById('email'),
phone = document.getElementById('phone'),
button = document.getElementById('button'),
veri = document.getElementsByClassName("verification");
var pattern = {
username:/^[a-z]\w{6,20}$/,
password:/^\S{6,16}$/,
confirmPassword:/^\S{6,16}&/,
realName:/^[\u4e00-\u9fa5]{2,4}$/,
idNumber:/^[0-9]{15}$|^[0-9]{18}$|^[0-9]{17}X$|^[0-9]{16}$/,
email:/(?:\w+\.)*\w+@(?:\w+\.)+[a-z]/i,
phone:/^13\d{9}$|^147\d{9}$|^15[0,1,2,3,4,6,7,8,9]{1}\d{8}$|^182\d{8}$|^18[5-9]\d{8}$|^180\d{8}$/
}
var allElem = [];
var flag = false,
flag1 = false,
flag2 = false,
flag3 = false,
flag4 = false,
flag5 = false,
flag6 = false;
username.onblur = function(){
if(username.value.match(pattern.username)){
veri[0].innerHTML = "OK";
flag = true;
}else{
veri[0].innerHTML = "请输入6-20位字母，数字下划线";
flag = false;
}
}
password.onblur = function(){
if(password.value.match(pattern.password)){
veri[1].innerHTML = "OK";
flag1 = true;
}else{
veri[1].innerHTML = "请设置密码";
flag1 = false;
}
}
confirmPassword.onblur = function(){
if(password.value == confirmPassword.value){
veri[2].innerHTML = "OK";
flag2 = true;
}else{
veri[2].innerHTML = "两次输入的密码不一致";
flag2 = false;
}
}
realName.onblur = function(){
if(realName.value.match(pattern.realName)){
veri[3].innerHTML = "OK";
flag3 = true;
}else{
veri[3].innerHTML = "请输入2-4位汉字";
flag3 = false;
}
}
idNumber.onblur = function(){
if(idNumber.value.match(pattern.idNumber)){
veri[5].innerHTML = "OK";
flag4 = true;
}else{
veri[5].innerHTML = "请输入正确的身份证号码";
flag4 = false;
}
}
email.onblur = function(){
if(email.value.match(pattern.email)){
veri[6].innerHTML = "OK";
flag5 = true;
}else{
veri[6].innerHTML = "请输入正确的邮箱地址";
flag5 = false;
}
}
button.addEventListener("click",function(){
if(flag == true && flag1 == true && flag2 == true && flag3 == true && flag4 == true && flag5 == true && flag6 == true){
alert("成功");
}else{
alert("验证失败");
}
});
</script>
</body>
</html>
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星