老师帮忙看看可以优化的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 800px;
height: 500px;
background-color: #eee;
margin: 0 auto;
}
.reg{
width: 800px;
height: 40px;
line-height: 40px;
background-color: #00bfff;
color: #fff;
text-indent: 20px;
}
.regForm{
width: 500px;
/*background-color: yellow;*/
margin: 0 auto;
padding-top: 40px;
}
.tab{
width: 100%;
text-align: center;
table-layout: fixed;
}
.left{
width: 150px;
text-align: right;
}
.middle{
width: 180px;
text-align: left;
}
.right{
width: 250px;
font-size: 12px;
/*background-color: blue;*/
text-align: left;
color: red;
}
tr{
height: 35px;
}
input{
width: 173px;

}
.len{
width: 175px;
}
.btn{
width: 60px;
height: 30px;
background-color: #00bfff;
border: 1px solid ##00bfff;
border-radius: 7px;
margin-top: 50px;
margin-left: -80px;
}
</style>
</head>
<body>
<div class="wrap">
<p class="reg">用户注册</p>
<div class="regForm">
<table class="tab">
<tr>
<td class="left">用户名：</td>
<td class="middle"><input type="text" name="username" id="username"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">登录密码：</td>
<td class="middle"><input type="password" name="pwd" id="pwd"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">确认密码：</td>
<td class="middle"><input type="password" name="agPwd" id="agPwd"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">姓名：</td>
<td class="middle"><input type="text" name="fullName" id="fullName"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">性别：</td>
<td class="middle">
<select class="len" id="sex">
<option>男</option>
<option>女</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td class="left">身份证号码：</td>
<td class="middle"><input type="text" name="idNumber" id="idNumber"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">邮箱：</td>
<td class="middle"><input type="email" name="pemail" id="pemail"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td class="left">手机号码：</td>
<td class="middle"><input type="text" name="phoneNumber" id="phoneNumber"></td>
<td class="right"><div class="iok"></div></td>
</tr>
<tr>
<td colspan="3"><input type="submit" class="btn" id="subbtn"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var username=byId("username"),
pwd=byId("pwd"),
agPwd=byId("agPwd"),
fullName=byId("fullName"),
sex=byId("sex"),
idNumber=byId("idNumber"),
pemail=byId("pemail"),
phoneNumber=byId("phoneNumber"),
subbtn=byId("subbtn"),
iok=document.getElementsByClassName("iok"),
isTrue0=false,
isTrue1=false,
isTrue2=false,
isTrue3=false,
isTrue4=false,
isTrue5=false,
isTrue6=false;

//根据id获取元素
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}

//用户名正则验证，6-20位字母、数字或“_”，字母开头
username.onblur=function(){
var pattern=/^[a-zA-Z]\w{5,19}$/;
if(this.value==""){
iok[0].innerHTML="6-20位字母、数字或“_”，字母开头";
isTrue0=false;
}else{
if(this.value.match(pattern)){
iok[0].innerHTML="OK";
isTrue0=true;
}else{
iok[0].innerHTML="6-20位字母、数字或“_”，字母开头";
isTrue0=false;
}
}
}
//密码正则验证，数字、字母或符号，中间不能有空格---6-18位，包含数字、字母、符号
pwd.onblur=function(){
var pattern=/^(?:\d|[a-zA-Z]|[^\s]){6,18}$/;
if(this.value==""){
iok[1].innerHTML="数字、字母或符号，中间不能有空格";
isTrue1=false;
}else{
if(this.value.match(pattern)){
iok[1].innerHTML="OK";
isTrue1=true;
}else{
iok[1].innerHTML="6-18位数字、字母或符号，中间不能有空格";
isTrue1=false;
}
}
}
//请设置密码---请确认密码
agPwd.onblur=function(){
if(isTrue1){
if(this.value==pwd.value){
iok[2].innerHTML="OK";
isTrue2=true;
}else{
iok[2].innerHTML="两次输入密码不一致";
isTrue2=false;
}
}else{
iok[2].innerHTML="";
isTrue2=false;
}
}
//两位到四位的中文---真实姓名为两位到四位的中文
fullName.onblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if(this.value==""){
iok[3].innerHTML="两位到四位的中文";
isTrue3=false;
}else{
if(this.value.match(pattern)){
iok[3].innerHTML="OK";
isTrue3=true;
}else{
iok[3].innerHTML="真实姓名为两位到四位的中文";
isTrue3=false;
}
}
}
//请输入18位的身份证号码
idNumber.onblur=function(){
var pattern=/^[\d]{15}$|^[\d]{17}[\dxX]$/;
if(this.value==""){
iok[4].innerHTML="请输入身份证号码";
isTrue4=false;
}else{
if(this.value.match(pattern)){
iok[4].innerHTML="OK";
isTrue4=true;
}else{
iok[4].innerHTML="请输入15位或18位的身份证号码";
isTrue4=false;
}
}
}
//邮箱格式不正确
pemail.onblur=function(){
var pattern=/^\w+@(?:[a-zA-Z\.]+)(?:\.[a-zA-Z]{2,})$/;
if(this.value==""){
iok[5].innerHTML="请输入邮箱";
isTrue5=false;
}else{
if(this.value.match(pattern)){
iok[5].innerHTML="OK";
isTrue5=true;
}else{
iok[5].innerHTML="邮箱格式不正确";
isTrue5=false;
}
}
}
//电话号码不正确
phoneNumber.onblur=function(){
var pattern=/^(15[(0-35-9]|13\d|18[025-9])\d{8}$/;
if(this.value==""){
iok[6].innerHTML="请输入电话号码";
isTrue6=false;
}else{
if(this.value.match(pattern)){
iok[6].innerHTML="OK";
isTrue6=true;
}else{
iok[6].innerHTML="电话号码不正确";
isTrue6=false;
}
}
}
//提交按钮验证
subbtn.onclick=function(){
if(isTrue0 && isTrue1 && isTrue2 && isTrue3 && isTrue4 && isTrue5 && isTrue6){
alert("验证成功");
}
}
</script>
</body>
</html>

qq_初晴moment_5 2019-10-14

源自：正则表达式 4-8 编程练习