老师，帮忙看一下怎么优化
来源：4-8 编程练习
qq_倚楼听风雨_5
2019-08-13 15:07:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录账号测试练习 </title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-weight: 300;
}
.regexp{
background-color: rgb(238,238,238);
margin: auto 10%;
}
.title{
background-color: rgb(0,143,215);
height: 40px;
color: #fff;
line-height: 40px;
padding-left: 40px;
font-size: 20px;
}
.userInfo{
/*margin-left: 300px;*/
width: 500px;
margin: 30px 400px;
/*background-color: red;*/
}
.userInfo label{
display: inline-block;
width: 100px;
text-align: right;
color: rgb(101,101,102);
}
.userInfo span{
font-size: 12px;
color: red;
}
.submit{
margin-left: 45%;
/*left: 20px;*/
width: 80px;
height: 40px;
background-color: rgb(0,112,192);
margin-bottom: 40px;
border-radius: 5px;
color: #fff;
font-size: 22px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="regexp">
<div class="title">用户注册</div>
<p class="userInfo">
<label>用户名：</label>
<input type="text" name="username" class="usertext">
<span class="userTip"></span>
</p>
<p class="userInfo">
<label>登录密码：</label>
<input type="password" name="pwd" class="pswtext">
<span class="pwdTip"></span>
</p>
<p class="userInfo">
<label>确认密码：</label>
<input type="password" name="pwd" class="conPswtext">
<span class="conPwdTip"></span>
</p>
<p class="userInfo">
<label>姓名：</label>
<input type="text" name="name" class="nametext">
<span class="nameTip"></span>
</p>
<p class="userInfo">
<label>性别：</label>
<select id="sex">
<option title="male">男</option>
<option title="famle">女</option>
</select>
<!-- <span class="userTip"></span> -->
</p>
<p class="userInfo">
<label>身份证号码：</label>
<input type="text" name="identifier" class="identifiertext">
<span class="identifiTip"></span>
</p>
<p class="userInfo">
<label>邮箱：</label>
<input type="email" name="email" class="emailtext">
<span class="emailTip"></span>
</p>
<p class="userInfo">
<label>手机号码：</label>
<input type="text" name="phone" class="teltext">
<span class="telTip"></span>
</p>
<button class="submit">提交</button>
</div>
</body>
<script type="text/javascript">
//定义获取元素的方法
function getElememt(str) {
return document.querySelector(str);
}
var usertext = getElememt('.usertext'),
password = getElememt('.pswtext'),
conPswtext = getElememt('.conPswtext'),
nametext = getElememt('.nametext'),
identifiertext = getElememt('.identifiertext'),
emailtext = getElememt('.emailtext'),
teltext = getElememt('.teltext')
submitBtn = getElememt('.submit');
var tips = {
userTip:getElememt('.userTip'),
pwdTip:getElememt('.pwdTip'),
conPwdTip:getElememt('.conPwdTip'),
nameTip:getElememt('.nameTip'),
identifiTip:getElememt('.identifiTip'),
emailTip:getElememt('.emailTip'),
telTip:getElememt('.telTip')
};
// 元素获取焦点的方法
function getBlur(elem,handler){
elem.onblur= handler;
}
getBlur(usertext,function(){
var pattern = /^[a-zA-Z]\w{7,20}$/;
if (!usertext.value) {
tips.userTip.innerHTML = '用户名不能为空';
isOk1 = false;
}else if (!pattern.exec(usertext.value)) {
// tips.userTip.style.display = 'inline-block';
tips.userTip.innerHTML = '6-20位字母、数字或"_"，字母开头';
isOk1 = false;
}else{
isOk1 = true;
tips.userTip.innerHTML = 'OK';
}
});
getBlur(password,function(){
var pattern = /^\S{6,16}$/;
if (!password.value) {
tips.pwdTip.innerHTML = '请设置密码';
isOk2 = false;
}else if (!pattern.exec(password.value)) {
// tips.userTip.style.display = 'inline-block';
tips.pwdTip.innerHTML = '数字、字母或符号，中间不能有空格';
isOk2 = false;
}else{
tips.pwdTip.innerHTML = 'OK';
isOk2 = true;
}
});
getBlur(conPswtext,function(){
if (!conPswtext.value && !password.value) {
tips.conPwdTip.innerHTML = '请设置密码';
isOk3 = false;
}else if (!conPswtext.value &&password.value) {
tips.conPwdTip.innerHTML = '请再次输入密码';
isOk3 = false;
}else if (password.value !== conPswtext.value) {
tips.conPwdTip.innerHTML = '两次密码不一致';
isOk3 = false;
}else{
tips.conPwdTip.innerHTML = 'OK';
isOk3 = true;
}
});
getBlur(nametext,function(){
var pattern = /^[u4e00-\u9fa5]{2,4}$/;
if (!nametext.value) {
tips.nameTip.innerHTML = '姓名不能为空';
isOk4 = false;
}else if (!pattern.exec(nametext.value)) {
tips.nameTip.innerHTML = '真实姓名为两位到四位的中文';
isOk4 = false;
}else{
tips.nameTip.innerHTML = 'OK';
isOk4 = true;
}
});
getBlur(identifiertext,function(){
var pattern = /^[1-9]\d{14,17}(?:\d|\w)$/;
if (!identifiertext.value) {
tips.identifiTip.innerHTML = '身份证号不能为空';
isOk5 = false;
}else if (!pattern.exec(identifiertext.value)) {
tips.identifiTip.innerHTML = '请输入18位的身份证号码';
isOk5 = false;
}else{
tips.identifiTip.innerHTML = 'OK';
isOk5 = true;
}
});
getBlur(emailtext,function(){
var pattern = /^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]{2,4}$/i;
if (!emailtext.value) {
tips.emailTip.innerHTML = '邮箱不能为空';
isOk6 = false;
}else if (!pattern.exec(emailtext.value)) {
tips.emailTip.innerHTML = '邮箱格式不正确';
isOk6 = false;
}else{
tips.emailTip.innerHTML = 'OK';
isOk6 = true;
}
});
getBlur(teltext,function(){
var pattern = /^[1][3-9]\d{9}$/;
if (!teltext.value) {
tips.telTip.innerHTML = '手机号不能为空';
isOk7 = false;
}else if (!pattern.exec(teltext.value)) {
tips.telTip.innerHTML = '电话号码格式不正确';
isOk7 = false;
}else{
tips.telTip.innerHTML = 'OK';
isOk7 = true;
}
});
submitBtn.onclick = function(){
if (isOk1==false||isOk2==false||isOk3==false||isOk4==false||isOk5==false||isOk6==false||isOk7==false) {
alert('验证信息不通过');
}else{
alert('验证信息OK');
}
}
</script>
</html>
1回答
-
好帮手慕慕子
2019-08-13
同学你好， 用户名验证这里需要优化一下哦。
以字母开头占据一个字符后， 后面需要调整量词的范围，才满足匹配6-20个字符的条件
其他代码实现的是可以的， 可以不用优化了， 继续加油哦
如果帮助到了你， 欢迎采纳。
祝学习愉快~~~
0
相似问题