请问这样可以吗？
来源：4-8 编程练习
Takm
2019-05-15 16:49:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 60px;
background-color: #3092d1;
color: #fff;
text-align: center;
line-height: 60px;
}
.content{
width: 100%;
height: 600px;
background-color: #eeeeee;
padding-top: 60px;
}
.content>div{
width: 800px;
height: 24px;
margin-bottom: 30px;
position: relative;
left: 50%;
margin-left: -400px;
}
.content>div>label{
width: 100px;
margin-right: 60%;
position: absolute;
right: 30px;
line-height: 24px;
}
.content>div>input{
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
line-height: 24px;
}
.content>div>select{
width: 205px;
height: 28px;
position: absolute;
left: 50%;
margin-left: -100px;
line-height: 24px;
}
.content>div>span{
width: 350px;
position: absolute;
left: 66%;
line-height: 24px;
color: #f00;
}
.content>input{
width: 80px;
height: 40px;
position: absolute;
left: 50%;
margin-left: -40px;
margin-top: 40px;
background-color: #2375ba;
color: #fff;
border: 0px solid;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h2>用户注册</h2>
</header>
<div class="content">
<div>
<label for="">用户名：</label>
<input type="text" id="username" value="">
<span id="usernamespan"></span>
</div>
<div>
<label for="">登录密码：</label>
<input type="password" id="password" value="">
<span id="passwordspan"></span>
</div>
<div>
<label for="">确认密码：</label>
<input type="password" id="pconfirm" value="">
<span id="pconfirmspan"></span>
</div>
<div>
<label for="">姓名：</label>
<input type="text" id="iname" value="">
<span id="inamespan"></span>
</div>
<div>
<label for="">性别：</label>
<select id="sex">
<option>男</option>
<option>女</option>
</select>
<span id="sexspan"></span>
</div>
<div>
<label for="">身份证号码：</label>
<input type="text" id="idnum" value="">
<span id="idnumspan"></span>
</div>
<div>
<label for="">邮箱：</label>
<input type="text" id="email" value="">
<span id="emailspan"></span>
</div>
<div>
<label for="">手机号码：</label>
<input type="text" id="phonenum" value="">
<span id="phonenumspan"></span>
</div>
<input type="submit" name="" value="提交" id="submit">
</div>
<script type="text/javascript">
// 正则
var RegExp={
usernameReg:/^[A-Za-z]\w{5,19}$/,
passwordReg:/[^\s]{6,18}/,
inameReg:/[\u4e00-\u9fa5]{2,4}/,
idnumReg:/\d{17}[\d|x]|\d{15}/,
emailReg:/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
phonenumReg:/^(?:150|151|152|153|155|156|157|158|159|130|131|132|133|134|135|136|137|138|139|180|182|185|186|187|188|189)[0-9]{8}$/
};
// 定义获取DOM的函数
function get(ele){
return document.getElementById(ele);
}
// 获取DOM
get(username); get(usernamespan);
get(password); get(passwordspan);
get(pconfirm); get(pconfirmspan);
get(iname); get(inamespan);
get(idnum); get(idnumspan);
get(email); get(emailspan);
get(phonenum); get(phonenumspan);
get(submit);
// 用户名判定函数
function usernamejudge(){
if(RegExp.usernameReg.test(username.value)){
usernamespan.innerHTML="OK";
}
else{
usernamespan.innerHTML="6-20位字母、数字或“_”,字母开头";
}
}
// 密码判定函数
function passwordjudge(){
if(RegExp.passwordReg.test(password.value)){
passwordspan.innerHTML="OK";
}
else{
passwordspan.innerHTML="6-18位，包括数字字母或符号，中间不能有空格";
}
}
// 确认密码判定函数
function pconfirmjudge(){
if(pconfirm.value==password.value){
pconfirmspan.innerHTML="OK";
}
else{
pconfirmspan.innerHTML="请设置密码";
}
}
// 姓名判定函数
function inamejudge(){
if(RegExp.inameReg.test(iname.value)){
inamespan.innerHTML="OK";
}
else{
inamespan.innerHTML="真实姓名为两位到四位的中文汉字";
}
}
// 身份证号判定函数
function idnumjudge(){
if(RegExp.idnumReg.test(idnum.value)){
idnumspan.innerHTML="OK";
}
else{
idnumspan.innerHTML="请输入15位或者18位的身份证号码";
}
}
// 邮箱判定函数
function emailjudge(){
if(RegExp.emailReg.test(email.value)){
emailspan.innerHTML="OK";
}
else{
emailspan.innerHTML="邮箱格式不正确";
}
}
// 手机号判定函数
function phonenumjudge(){
if(RegExp.phonenumReg.test(phonenum.value)){
phonenumspan.innerHTML="OK";
}
else{
phonenumspan.innerHTML="电话号码不正确";
}
}
// 绑定失焦函数
username.onblur=usernamejudge;
password.onblur=passwordjudge;
pconfirm.onblur=pconfirmjudge;
iname.onblur=inamejudge;
idnum.onblur=idnumjudge;
email.onblur=emailjudge;
phonenum.onblur=phonenumjudge;
// 绑定提交按钮点击事件
submit.onclick=function(){
usernamejudge();
passwordjudge();
pconfirmjudge();
inamejudge();
idnumjudge();
emailjudge();
phonenumjudge();
}
</script>
</body>
</html>请问哪里需要改进呢？
写回答
1回答
-
你好，代码中的问题：
1、身份证号验证有问题，当输入长度大于18的时候也会验证正确：
可以修改为：
2、代码中调用get方法是没有意义的：
首先传参应该是字符串，然后返回值需要变量接收，否则这样调用没有意义。代码可以执行是因为id值是可以直接使用的，不需要获取也可以用，所以没有问题。这几行调用的get方法的代码可以去掉，如果不想去掉的话在另一个链接中已经调整过了，可以修改下：
https://class.imooc.com/course/qadetail/116962
3、最后点击按钮是要有‘验证通过’提示的，可以完善下。
祝学习愉快！
0
相似问题