请老师检查并指导优化一下，谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: "Microsoft YaHei,微软雅黑";
}
input:focus{
outline: 1px solid #5caef9;
}
.wrap{
width: 880px;
margin: 20px auto;
}
.wrap .title{
height: 32px;
line-height: 32px;
text-indent: 20px;
background: #0EAAE7;
font-weight: normal;
font-size: 16px;
color: #fff;
}
.wrap .form-box{
background: #eceaea;
}
.wrap .form-box form{
padding-top: 20px;
color: #3a3f58;
margin-left: 120px;
}
.wrap .form-box .item-list{
height: 42px;
line-height: 42px;
margin: 5px 0;
}
.wrap .form-box .item-list:last-child{
text-align: center;
padding-bottom: 30px;
}
.item-list label{
display: inline-block;
width: 100px;
text-align: right;
}
.item-list span.tips{
font-size: 12px;
}
.item-list span.success{
color: #0f9d58;
}
.item-list span.error{
color: #f28e92;
}
.item-list input,.item-list select{
width: 220px;
height: 28px;
margin-left: 15px;
padding-left: 10px;
}
.item-list select{
width: 234px;
}
.submit-btn{
display: block;
width: 100px;
height: 45px;
line-height: 45px;
text-align: center;
margin-left: 160px;
background: #0E8CC6;
border: none;
color: #fff;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<h3 class="title">用户注册</h3>
<div class="form-box">
<form action="#">
<div class="item-list">
<label>用户名:</label>
<input type="text" name="username" data-verify="username" placeholder="">
</div>
<div class="item-list">
<label>登录密码:</label>
<input type="text" name="password" data-verify="password" placeholder="">
</div>
<div class="item-list">
<label>确认密码:</label>
<input type="text" name="confirm_pwd" data-verify="confirm_pwd" placeholder="">
</div>
<div class="item-list">
<label>姓名:</label>
<input type="text" name="surname" data-verify="surname" placeholder="">
</div>
<div class="item-list">
<label>性别:</label>
<select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
<div class="item-list">
<label>身份证号码:</label>
<input type="text" name="idcard" data-verify="idcard" placeholder="">
</div>
<div class="item-list">
<label>邮箱:</label>
<input type="text" name="email" data-verify="email" placeholder="">
</div>
<div class="item-list">
<label>手机号码:</label>
<input type="text" name="mobile" data-verify="mobile" placeholder="">
</div>
<div class="item-list">
<button type="button" class="submit-btn">提交</button>
</div>
</form>
</div>
</div>
</body>
<script>
var pattern_list = {
username : {
pattern : /^[a-zA-Z][\w\_]{5,19}$/,
fail : '6-20位字母、数字或“_”,字母开头'
},
password : {
pattern : /^\S{6,18}$/,
fail : '密码6-18位，包括数字字母或符号，中间不能有空格'
},
surname : {
pattern : /^[\u4e00-\u9fa5]{2,4}$/,
fail : '真实姓名为两位到四位的中文'
},
idcard : {
pattern : /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
fail : '15位或者18位的身份证号码'
},
email : {
pattern : /^[\w\d\.\-_]+@[a-z0-9]+(\.[a-z]{2,})+$/,
fail : '邮箱格式不正确'
},
mobile : {
pattern : /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
fail : '电话号码不正确'
}
};
var eventUnit = {
addHandler: function (element, type, handler) {
if (element.addEventListener) { //主流浏览器兼容写法
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //ie低版本事件写法
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler //dom0级事件绑定
}
},
getTarget: function (event) {
return event.target || event.srcElement;
},
};
function check(obj) {
var value = obj.value;
var verify_name = obj.getAttribute('data-verify');
var span = obj.parentNode.getElementsByClassName('tips')[0];
if(!span){
span = document.createElement("span"); // 创建一个元素节点
span.setAttribute('class','tips');
obj.parentNode.appendChild(span);
}
if(verify_name == 'confirm_pwd'){
if(!value || value != document.getElementsByName('password')[0].value){
span.classList.remove('success');
span.classList.add('error');
span.innerHTML = '两次密码输入不一致';
obj.focus();
}else{
span.classList.add('success');
span.classList.remove('error');
span.innerHTML = 'ok';
}
}else{
if(!pattern_list[verify_name] || pattern_list[verify_name]['pattern'].test(value)){
span.classList.add('success');
span.classList.remove('error');
span.innerHTML = 'ok';
}else{
span.classList.remove('success');
span.classList.add('error');
span.innerHTML = pattern_list[verify_name]['fail'];
obj.focus();
}
}
}
var input_list = document.querySelectorAll('input');
for (var i = 0; i < input_list.length; i ++){
eventUnit.addHandler(input_list[i],'blur',function (e) {
check(this);
})
}
var btn = document.querySelector('button');
eventUnit.addHandler(btn,'click',function (e) {
for (var i = 0; i < input_list.length; i ++){
check(input_list[i]);
}
var error = document.getElementsByClassName('error');
if(error.length == 0){
alert('验证成功');
}
});
</script>
</html>32
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星