我写的有两个问题，麻烦老师看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 1000px;
height: 500px;
background-color: #ccc;
margin: 0 auto;
}
.heading {
background-color: rgb(40, 90, 184);
text-indent: 20px;
height: 30px;
line-height: 30px;
font-weight: normal;
color: #eee;
margin-bottom: 40px;
}
p {
text-align: center;
margin: 10px;
font-size: 15px;
}
#sex {
width: 170px;
height: 20px;
}
#btn {
width: 70px;
height: 30px;
background-color: #0e77a8;
color: #eee;
border: 1px solid #0e77a8;
border-radius: 5px;
margin: 0 auto;
display: block;
}
span {
font-size: 10px;
color: rgb(214, 13, 13);
}
</style>
</head>
<body>
<div class="wrap">
<h5 class="heading">用户注册</h5>
<div class="wp">
<p>
用户名：<input type="text" id="userName"><span class="userName"></span>
</p>
<p>
登录密码：<input type="password" id="pwda"><span class="pwda"></span>
</p>
<p>
登录密码：<input type="password" id="pwdb"><span class="pwdb"></span>
</p>
<p>
姓名：<input type="text" id="name"><span class="name"></span>
</p>
<p>
性别：
<select name="sex" id="sex">
<option value="男" checked>男</option>
<option value="女">女</option>
</select><span class="sex"></span>
</p>
<p>
身份证号码：<input type="text" id="number"><span class="number"></span>
</p>
<p>
邮箱：<input type="text" id="mail"><span class="mail"></span>
</p>
<p>
手机号码：<input type="text" id="tel"><span class="tel"></span>
</p>
<br>
<input type="submit" id="btn" value="提交">
</div>
</div>
<script>
// 获取标签元素
var elem = {
userName1: document.getElementById('userName'),
userName2: document.getElementsByClassName('userName')[0],
pwda1: document.getElementById('pwda'),
pwda2: document.getElementsByClassName('pwda')[0],
pwdb1: document.getElementById('pwdb'),
pwdb2: document.getElementsByClassName('pwdb')[0],
name1: document.getElementById('name'),
name2: document.getElementsByClassName('name')[0],
sex1: document.getElementById('sex'),
sex2: document.getElementsByClassName('sex')[0],
number1: document.getElementById('number'),
number2: document.getElementsByClassName('number')[0],
mail1: document.getElementById('mail'),
mail2: document.getElementsByClassName('mail')[0],
tel1: document.getElementById('tel'),
tel2: document.getElementsByClassName('tel')[0],
btn: document.getElementById('btn'),
};
// 设置匹配内容
var pattern = {
userName: /^[a-z]\w{5,19}$/i,
pwda: /^[\S^\u4e00-\u9fa5]{6,18}$/,
name: /^[\u4e00-\u9fa5]{2,4}$/,
number: /^(?:(?:\d{15})|(?:\d{17}[\d|x]))$/,
mail: /^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]{2,4}$/i,
tel: /^(?:13\d|147|15(?:[1-3]|[5-9])|18(?:2|[5-9]))\d{8}$/,
};
// 设置各项内容的标志，判断是否符合要求
var a = {
a1: false,
a2: false,
a3: false,
a4: false,
a5: false,
a6: false,
a7: false,
};
// 封装判断函数
function judge(elem1, pattern, elem2, prompt, a) {
if (pattern.test(elem1.value)) {
elem2.innerHTML = 'OK';
a = true;
} else {
elem2.innerHTML = prompt;
a = false;
}
}
// 各内容进行判断
elem.userName1.onblur = function () {
judge(this, pattern.userName, elem.userName2, '6-20位字母、数字或“_”,字母开头', a.a1);
}
elem.pwda1.onblur = function () {
judge(this, pattern.pwda, elem.pwda2, '6-18位，包括数字字母或符号，中间不能有空格', a.a2);
}
elem.pwdb1.onblur = function () {
if (elem.pwdb1.value == elem.pwda1.value && elem.pwda2.innerHTML == 'OK') {
elem.pwdb2.innerHTML = 'OK';
a.a3 = true;
} else {
elem.pwdb2.innerHTML = '请设置密码';
a.a3 = false;
}
}
elem.name1.onblur = function () {
judge(this, pattern.name, elem.name2, '真实姓名为两位到四位的中文', a.a4);
}
elem.number1.onblur = function () {
judge(this, pattern.number, elem.number2, '请输入18位的身份证号码', a.a5);
}
elem.mail1.onblur = function () {
judge(this, pattern.mail, elem.mail2, '邮箱格式不正确', a.a6);
}
elem.tel1.onblur = function () {
judge(this, pattern.tel, elem.tel2, '电话号码不正确', a.a7);
}
// 给提交按钮绑定事件
elem.btn.onclick = function () {
for (var i in a) {
if (!a[i]) {
}
}
alert('验证成功');//这里我想的是对每一项内容的标志判断是否为true，如果都为true就弹出“验证成功”，不为true那一项就提示相应信息并且不弹窗
}
</script>
</body>
</html>
1、怎么让这些内容像任务提示的那样每个输入框都对齐呢？我的输入框后面的提示出现以后他们就更乱了
2、应该怎么给提交按钮绑定事件？怎么判断每一项是否符合标准？我写的好像太麻烦了，判断后不知道怎么显示相应的提示信息，要再进行一个一个onblur事件？
正在回答
同学你好，问题解答如下：
1、左侧的内容文本右对齐右侧的文本左对齐，是这样实现的。父容器中p标签中已经设置居中显示属性了，文本在水平方向上是居中的。显示效果中间的间隙想要保持一致，代码中文字和后面的文本框中间隙一致就好。
2、声明的flag变量接收的是judge方法中返回的布尔值，这个变量设置不设置都是可以的，if条件中直接调用judge方法。
3、for循环遍历也可以，但是会判断对象中每一个值，执行弹出正确或者错误语句，一般情况下只要最后一个总的提示就好。还是直接使用if判断，逻辑与会简单一些
4、如果想要循环的方式调用onblur事件，出现提示。建议将elem对象分为两个对象，分为只有表单元素，只有后面提示元素。然后遍历elem，调用onblur。例如：
自己可以试着写一写，祝学习愉快！
同学你好，关于同学的疑问，解答如下：
1、左侧的提示文字可以使用标签嵌套一下(使用其他的标签也是可以的，这里使用的是label标签，在后面的课程中会学到，这里了解即可)，调整样式。例如：
效果：
2、验证正确或者验证失败，改变对象a中的值，不要以传递参数的形式修改，是修改不成功的。建议：可以定义标识符，如下：
修改后的代码：
<script>
// 获取标签元素
var elem = {
userName1: document.getElementById('userName'),
userName2: document.getElementsByClassName('userName')[0],
pwda1: document.getElementById('pwda'),
pwda2: document.getElementsByClassName('pwda')[0],
pwdb1: document.getElementById('pwdb'),
pwdb2: document.getElementsByClassName('pwdb')[0],
name1: document.getElementById('name'),
name2: document.getElementsByClassName('name')[0],
sex1: document.getElementById('sex'),
sex2: document.getElementsByClassName('sex')[0],
number1: document.getElementById('number'),
number2: document.getElementsByClassName('number')[0],
mail1: document.getElementById('mail'),
mail2: document.getElementsByClassName('mail')[0],
tel1: document.getElementById('tel'),
tel2: document.getElementsByClassName('tel')[0],
btn: document.getElementById('btn'),
};
// 设置匹配内容
var pattern = {
userName: /^[a-z]\w{5,19}$/i,
pwda: /^[\S^\u4e00-\u9fa5]{6,18}$/,
name: /^[\u4e00-\u9fa5]{2,4}$/,
number: /^(?:(?:\d{15})|(?:\d{17}[\d|x]))$/,
mail: /^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]{2,4}$/i,
tel: /^(?:13\d|147|15(?:[1-3]|[5-9])|18(?:2|[5-9]))\d{8}$/,
};
// 设置各项内容的标志，判断是否符合要求
var a = {
a1: false,
a2: false,
a3: false,
a4: false,
a5: false,
a6: false,
a7: false,
};
// 封装判断函数
function judge(elem1, pattern, elem2, prompt) {
var sign = false;
if (pattern.test(elem1.value)) {
elem2.innerHTML = 'OK';
sign = true;
} else {
elem2.innerHTML = prompt;
sign = false;
}
return sign
}
// 各内容进行判断
elem.userName1.onblur = function () {
var flag = judge(this, pattern.userName, elem.userName2, '6-20位字母、数字或“_”,字母开头');
if (flag) {
a.a1 = true
} else {
a.a1 = false
}
}
elem.pwda1.onblur = function () {
var flag = judge(this, pattern.pwda, elem.pwda2, '6-18位，包括数字字母或符号，中间不能有空格');
if (flag) {
a.a2 = true
} else {
a.a2 = false
}
}
elem.pwdb1.onblur = function () {
if (elem.pwdb1.value == elem.pwda1.value && elem.pwda2.innerHTML == 'OK') {
elem.pwdb2.innerHTML = 'OK';
a.a3 = true;
} else {
elem.pwdb2.innerHTML = '请设置密码';
a.a3 = false;
}
}
elem.name1.onblur = function () {
var flag = judge(this, pattern.name, elem.name2, '真实姓名为两位到四位的中文');
if (flag) {
a.a4 = true
} else {
a.a4 = false
}
}
elem.number1.onblur = function () {
var flag = judge(this, pattern.number, elem.number2, '请输入18位的身份证号码');
if (flag) {
a.a5 = true
} else {
a.a5 = false
}
}
elem.mail1.onblur = function () {
var flag = judge(this, pattern.mail, elem.mail2, '邮箱格式不正确');
if (flag) {
a.a6 = true
} else {
a.a6 = false
}
}
elem.tel1.onblur = function () {
var flag = judge(this, pattern.tel, elem.tel2, '电话号码不正确');
if (flag) {
a.a7 = true
} else {
a.a7 = false
}
}
// 给提交按钮绑定事件
elem.btn.onclick = function () {
if (a.a1 && a.a2 && a.a3 && a.a4 && a.a5 && a.a6 && a.a7) {
alert("验证成功")
} else {
alert("验证失败")
}
}
</script>如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星