老师我这里还有一个问题
来源：4-8 编程练习
qq_麥芽糖
2019-01-17 11:51:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<style>
*{padding: 0;margin: 0;}
.all{
width: 1000px;
margin: 50px auto;
}
.top{
width: 940px;
padding:5px 30px;
background: blue;
color: #fff;
}
.center{
background: #ddd;
height: 500px;
}
.item{
width: 100%;
}
.item span,.sex span{
color: #000;
font-size: 16px;
margin:15px 30px 15px 30%;
display: inline-block;
text-align: right;
width: 100px;
}
.item input,.sex input{
width: 180px;
}
.sex select{
width: 180px;
}
.btn{
margin-left: 45%;
margin-right: 50%;
}
.btn input{
width: 80px;
height: 35px;
margin-top: 30px;
border-radius: 5px;
color: #fff;
background: blue;
border:1px solid #000;
font-size: 16px;
line-height: 35px;
}
.b{
color: red;
margin-left: 15px;
font-weight: 100px;
}
</style>
<body>
<div class="all">
<div class="top">用户注册</div>
<div class="center">
<form action="">
<div class="item"><span>用户名:</span><input type="text" id="username" autocomplete="off"><b class="b"></b></div>
<div class="item"><span>登陆密码:</span><input type="password" id="password" autocomplete="off"><b class="b"></b></div>
<div class="item"><span>确认密码:</span><input type="password" id="password_two" autocomplete="off"><b class="b"></b></div>
<div class="item"><span>姓名:</span><input type="text" id="myname" autocomplete="off"><b class="b"></b></div>
<div class="sex"><span>性别:</span>
<select name="sex" id="sex">
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</div>
<div class="item"><span>身份证号码:</span><input type="text" id="card" autocomplete="off"><b class="b"></b></div>
<div class="item"><span>邮箱:</span><input type="text" id="email" autocomplete="off"><b class="b"></b></div>
<div class="item"><span>手机号码:</span><input type="text" id="phone" autocomplete="off"><b class="b"></b></div>
<div class="btn"><input type="button" id="button" value="提交"></div>
</form>
</div>
</div>
</body>
<script>
window.onload = function () {
var username = document.getElementById('username'),
password = document.getElementById('password'),
password_two = document.getElementById('password_two'),
myname = document.getElementById('myname'),
card = document.getElementById('card'),
email = document.getElementById('email'),
phone = document.getElementById('phone'),
button = document.getElementById('button'),
item = document.getElementsByClassName('item');
var innerHTMLs = {
username_innerHTML:'6-20位字母、数字或"_",字母开头',
password_innerHTML:'6-18位,包含字母、数字或符号,中间不能有空格',
password_two_innerHTML:'两次密码不一致',
myname_innerHTML:'真实名字位为2位到4位的中文',
card_innerHTML:'输入15位或者18位身份证号码',
email_innerHTML:'邮箱地址不正确',
phone_innerHTML: '手机号码不正确'
}
var innerHTML_arr = ['6-20位字母、数字或"_",字母开头','6-18位,包含字母、数字或符号,中间不能有空格','两次密码不一致','真实名字位为2位到4位的中文','输入15位或者18位身份证号码','邮箱地址不正确','手机号码不正确'];
var num = 0;
username.onblur = function(){//用户名
var useRegExp = /^[a-zA-Z]\w{5,20}$/;
if (username.value && useRegExp.exec(this.value)) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.username_innerHTML;
//this.focus();
}
}
password.onblur = function(){//密码
var useRegExp = /^\S{6,18}$/;
if (password.value && useRegExp.exec(this.value)) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.password_innerHTML;
//this.focus();
}
}
password_two.onblur = function(){//确认密码
if (password_two.value ===password.value && password_two.value !== '') {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.password_two_innerHTML;
//this.focus();
}
}
myname.onblur = function(){//名字
var useRegExp = /^[\u4e00-\u9fa5]{2,4}$/;
if (myname.value && useRegExp.exec(this.value)) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.myname_innerHTML;
//this.focus();
}
}
card.onblur = function(){//身份证号码
var useRegExp = /^\d{15}$/;
var useRegExp2 = /^\d{18,18}$/;
var useRegExp3 = /^\d{17,17}x$/;
if (card.value && useRegExp.exec(this.value) || useRegExp2.exec(this.value) || useRegExp3.exec(this.value)) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.card_innerHTML;
//this.focus();
}
}
email.onblur = function(){//email
//12323@qq.com、lulu_s@open.com、lu_lu_z@qq.com.cn
var useRegExp = /(\w+\.)*\w@(?:\w+\.)+[a-z]/i;
if (email.value && useRegExp.exec(this.value) ) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.email_innerHTML;
//this.focus();
}
}
phone.onblur = function(){//phone
var useRegExp = /^13\d{9}|15[0,1,2,3,5,6,7,8,9]{1}\d{8}|18[0,2,5,6,7,8,9]{1}\d{8}$/;
if (phone.value && useRegExp.exec(this.value) ) {
this.parentNode.lastChild.innerHTML = 'OK';
num += 1;
}else{
this.parentNode.lastChild.innerHTML = innerHTMLs.phone_innerHTML;
//this.focus();
}
}
function item_succeed() {//当都输入内容正确时执行
if (num === 7)alert('成功提交');
}
function item_lost() {//没有输入内容
for (var i = 0; i<item.length;i++) {
if (item[i].lastChild.previousSibling.value == '') {
item[i].lastChild.innerHTML = innerHTML_arr[i]
}
}
alert('提交失败：内容不全/输入有误');
}
button.onclick = function(event){ //判断是否都输入了内容
item_lost();
item_succeed();
//event.preventDefault();
}
}
</script>
</html>
就是当我在其他位置没有输入内容的时候，为什么他是先弹出我没有输入内容的alert，而那个item[i].lastChild.innerHTML = innerHTML_arr[i]却在alert之后呢
2回答
-
你好，页面中输出与alert弹框是两种输出方式，并且都是在页面中进行的，所以alert弹框之后点击确定才能显示错误信息。代码是没有问题的，只是alert的问题。
祝学习愉快！
0 -
qq_麥芽糖
提问者
2019-01-17
我debugger的时候它是正常按顺序显示的，先显示item[i].lastChild.innerHTML = innerHTML_arr[i]再显示alert的内容，而实际却是相反
0
相似问题