老师请检查，还有需要优化的吗
来源：4-8 编程练习
kekeke_
2022-04-22 18:56:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
.title{
background-color: #3092d1;
color: white;
height: 50px;
font-size: 20px;
line-height: 50px;
}
.input{
background-color: #eeeeee;
height: 800px;
color: #666666;
width: 1200px;
}
.input_box{
border: 1px solid red;
padding-top: 50px;
width: 600px;
margin: 0 auto;
}
.input_line{
margin-bottom: 20px;
}
.input_line .explain{
display: inline-block;
width: 100px;
text-align: right;
margin-right: 20px;
}
.btn{
width: 100px;
height: 50px;
color: white;
background-color: #2375ba;
border-radius: 5px;
font-size: 20px;
margin-left: 150px;
}
.top50{
margin-top: 50px;
}
.text{
width: 170px;
}
.red{
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="title">用户注册</div>
<div class="input">
<div class="input_box">
<div class="input_line">
<span class="explain">用户名:</span><input type="text" class="text" id="username" title="/^\w{4,26}$/"><span class="red" title="6-20位字母、数字或“_”,字母开头"></span>
</div>
<div class="input_line">
<span class="explain">登录密码:</span><input type="text" class="text" id="password"><span class="red" title="数字、字母或符号，中间不能有空格"></span>
</div>
<div class="input_line">
<span class="explain">确认密码:</span><input type="text" class="text" id="confirmPwd"><span class="red" title="两次输入密码不一致"></span>
</div>
<div class="input_line">
<span class="explain">姓名:</span><input type="text" class="text" id="name"><span class="red" title="真实姓名为两位到四位中文"></span>
</div>
<div class="input_line">
<span class="explain">性别:</span><select class="text">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="input_line">
<span class="explain">身份证号码:</span><input type="text" class="text" id="card"><span class="red" title="请输入18位的身份证号码"></span>
</div>
<div class="input_line">
<span class="explain">邮箱:</span><input type="text" class="text" id="email"><span class="red" title="邮箱格式不正确"></span>
</div>
<div class="input_line">
<span class="explain">手机号码:</span><input type="text" class="text" id="phone"><span class="red" title="电话号码不正确"></span>
</div>
<div class="input_line top50 center">
<input type="button" class="btn" value="提交" id="btn">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var username=document.getElementById('username'),
reds=document.getElementsByClassName('red'),
password=document.getElementById('password'),
confirmPwd=document.getElementById('confirmPwd'),
name1=document.getElementById('name'),
card=document.getElementById('card'),
email=document.getElementById('email'),
phone=document.getElementById('phone');
// text=document.getElementsByClassName('text')
// 判断用户名
username.onblur=function() {
var pattern=/^[a-zA-Z]\w{5,19}$/;
if (pattern.test(this.value)) {
reds[0].innerHTML='OK'
}else {reds[0].innerHTML=reds[0].title}
}
// 判断登录密码
password.onblur=function() {
var pattern=/^\S{6,18}$/;
if (pattern.test(this.value)) {
reds[1].innerHTML='OK'
}else {reds[1].innerHTML=reds[1].title}
}
// 确认密码
confirmPwd.onblur=function() {
var pattern=/password/;
if (this.value===password.value && password.value!='') {
reds[2].innerHTML='OK'
}
else {reds[2].innerHTML=reds[2].title}
}
// 姓名
name1.onblur=function() {
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if (pattern.test(this.value)) {
reds[3].innerHTML='OK'
}else {reds[3].innerHTML=reds[3].title}
}
// 验证身份证号
card.onblur=function() {
var pattern=/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
if (pattern.test(this.value)) {
reds[4].innerHTML='OK'
}else {reds[4].innerHTML=reds[4].title}
}
// 验证邮箱
email.onblur=function() {
var pattern=/^[a-z0-9]+([.-_][a-z0-9]+)*@[a-z0-9]+([.-_][a-z0-9]+)*\.[a-z]{2,4}$/;
if (pattern.test(this.value)) {
reds[5].innerHTML='OK'
}else {reds[5].innerHTML=reds[5].title}
}
// 验证手机号码
phone.onblur=function() {
var pattern=/^(13)[0-9]{9}$|(147)[0-9]{8}$|(15)[0,1,2,3,5,6,7,8,9]{1}[0-9]{8}$|(18)[0,2,5,6,7,8,9]{1}[0-9]{8}$/;
if (pattern.test(this.value)) {
reds[6].innerHTML='OK'
}else {reds[6].innerHTML=reds[6].title}
}
btn.onclick=function() {
if (reds[0].innerHTML==='OK'&&reds[1].innerHTML==='OK'&&reds[2].innerHTML==='OK'&&reds[3].innerHTML==='OK'&&reds[4].innerHTML==='OK'&&reds[5].innerHTML==='OK'&&reds[6].innerHTML==='OK') {
alert('验证成功')
}else{
alert('信息不完善');
}
}
1回答
-
同学你好，可做如下调整：
1、优化建议：
没用的代码最好删除，保持代码简洁，例如：
2、手机号的正则有点问题，如下几种形式，无法限制住“11位”：
需要补上“^”:
祝学习愉快!
0
相似问题