4-8 练习, 代码还有那些需要优化的地方,给点意见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.reg {
margin: 100px auto;
text-align: center;
/*div中的内容剧中*/
}
.reg table td {
height: 40px;
}
.reg table tr td:first-child {
text-align: right;
}
.reg table tr td:nth-child(2) input,
.reg table tr td:nth-child(2) select {
margin-left: 30pxl
}
.title {
padding: 0px;
margin: 0px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="title">
<h5>用户注册</h5>
</div>
<div id='reg' class="reg">
<form>
<table cellpadding='0' cellspacing='0'>
<tr>
<td width='120px'> 用户名:</td>
<td width='220px'><input type="text" id="username" placeholder="6-20位字母、数字或_" onblur=""></td>
<td width='210px'><span id="usernameProm" style="color: red" title="6-20位字母、数字或_"></span></td>
</tr>
<tr>
<td width='120px'> 登录密码:</td>
<td width='220px'><input type="password" id="passwordS"></td>
<td width='210px'><span id="passwordSProm" style="color: red" title="6-18位，包括数字字母或符号"></span></td>
</tr>
<tr>
<td width='120px'> 确认密码:</td>
<td width='220px'><input type="password" id="passwordE"></td>
<td width='210px'><span id="passwordEProm" style="color: red" title="两次输入密码不一致"></span></td>
</tr>
<tr>
<td width='120px'> 姓名:</td>
<td width='220px'><input type="text" id="name"></td>
<td width='210px'><span id="nameProm" style="color: red" title="两位到四位的中文汉字"></span></td>
</tr>
<tr>
<td width='120px'> 性别:</td>
<td width='220px'><select id="sex" class="sex">
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
<tr>
<td width='120px'>身份证号码:</td>
<td width='220px'><input type="text" id="number"></td>
<td width='210px'><span id="numberProm" style="color: red" title="身份证格式不正确"></span></td>
</tr>
<tr>
<td width='120px'> 邮箱:</td>
<td width='220px'><input type="email" id="email"></td>
<td width='210px'><span id="emailProm" style="color: red" title="邮箱格式错误"></span></td>
</tr>
<tr>
<td width='120px'> 手机号码:</td>
<td width='220px'><input type="number" id="phone"></td>
<td width='210px'><span id="phoneProm" style="color: red" title="手机号格式错误"></span></td>
</tr>
<tr>
<td colspan="3" height='30'></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交" class="btn" id="btn" /></td>
</tr>
</table>
</form>
</div>
<script>
(function () {
var username = document.getElementById('username');
var passwordS = document.getElementById('passwordS');
var passwordE = document.getElementById('passwordE');
var name = document.getElementById('name');
var number = document.getElementById('number');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var phoneProm = document.getElementById('phoneProm');
var usernameProm = document.getElementById('usernameProm');
var passwordSProm = document.getElementById('passwordSProm');
var passwordEProm = document.getElementById('passwordEProm');
var nameProm = document.getElementById('nameProm');
var numberProm = document.getElementById('numberProm');
var emailProm = document.getElementById('emailProm');
var phoneProm = document.getElementById('phoneProm');
username.addEventListener('blur', function () {
regexpUserName(this.value);
});
function regexpUserName(value) {
var pattern = /^[A-Za-z]\w{5,19}$/;
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
usernameProm.innerHTML = usernameProm.title;
} else {
usernameProm.innerHTML = 'OK';
}
console.log("regexpUserName",value,result);
return result;
}
passwordS.addEventListener('blur', function () {
regexpPassword(this.value);
});
function regexpPassword(value) {
var pattern = /^\S{6,18}$/;
var result = pattern.test(value);
if (!result) {
passwordSProm.innerHTML = passwordSProm.title;
} else {
passwordSProm.innerHTML = 'OK';
}
console.log("regexpPassword",value,result);
return result;
}
passwordE.addEventListener('blur', function () {
regexpPasswordE(this.value);
});
function regexpPasswordE(value) {
console.log("regexpPasswordE:"+value);
if (value === 'undefined' || value === null || value === '') {
passwordEProm.innerHTML = passwordEProm.title;
return false;
}
var result = passwordS.value === value;
if (!result) {
passwordEProm.innerHTML = passwordEProm.title;
} else {
passwordEProm.innerHTML = 'OK';
}
console.log("regexpPasswordE",value,result);
return result;
}
name.addEventListener('blur', function () {
regexpName(this.value);
});
function regexpName(value) {
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
nameProm.innerHTML = nameProm.title;
} else {
nameProm.innerHTML = 'OK';
}
console.log("regexpName",value,result);
return result;
}
number.addEventListener('blur', function () {
regexpNumber(this.value);
});
function regexpNumber(value) {
var pattern = /^\d{17}[0-9x]$/;//结尾x如何判断?
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
numberProm.innerHTML = numberProm.title;
} else {
numberProm.innerHTML = 'OK';
}
console.log("regexpNumber",value,result);
return result;
}
email.addEventListener('blur', function () {
regexpEmail(this.value);
});
function regexpEmail(value) {
var pattern = /^[a-z0-9]+(?:[.-_][a-z0-9]+)*@[a-z0-9]+([.-_][a-z0-9]+)*\.[a-z]{2,4}$/;
var result = pattern.test(value);
if (!result) {
emailProm.innerHTML = emailProm.title;
} else {
emailProm.innerHTML = 'OK';
}
console.log("regexpEmail",value,result);
return result;
}
// phone.onblur(function () {
// });
phone.addEventListener('blur', function () {
regexpPhone(this.value);
});
function regexpPhone(value) {
var pattern = /^(?:13[0-9]|147|15[012356789]|18[0256789]|17[0-9])\d{8}$/;
var result = pattern.test(value);
console.log('====================================');
console.log(pattern.exec(value));
console.log('====================================');
if (!result) {
phoneProm.innerHTML = phoneProm.title;
} else {
phoneProm.innerHTML = 'OK';
}
console.log("regexpPhone",value,result);
return result;
}
/**
* 点击提交按钮 验证是否全部合法
*/
function formInput() {
if (!regexpUserName(username.value) || !regexpEmail(email.value) || !regexpName(name.value) || !regexpNumber(number.value)
|| !regexpPassword(passwordS.value) || !regexpPasswordE(passwordE.value) || !regexpPhone(phone.value)) {
alert('验证失败');
} else {
alert('验证成功');
}
}
var btn = document.getElementById('btn');
btn.onclick = formInput;
})();
</script>
</body>
</html>0
收起
正在回答
2回答
同学你好！
简单的来说可以实现居中，并设置input的默认宽高，做到input比较统一：
其实不建议同学使用表格来实现这一部分，可以使用p标签或者是div（表格标签具有默认的样式，不好调试，一些比较大的页面使用table布局的情况也比较少）
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题
老师帮忙检查一下代码？有没有需要优化的地方
16
0
4
请老师检查。怎样优化比较好
15
0
4
3-4编程练习：这样写哪些地方需要改的？
0
0
4
为什么没有编程练习的参考答案
33
0
6
请老师帮忙检查有无需要注意的问题和需要修改优化的
17
0
4
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星