老师帮忙看下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账号注册</title>
<style>
*{
margin: 0;
padding: 0;
}
.formContent{
width: 1000px;
margin: 0 auto;
font-size: 18px;
background: #ccc;
}
.title{
background: #4f81c7;
color: #fff;
padding-left:18px;
line-height: 36px;
height: 36px;
}
.formMain{
width: 500px;
text-align: center;
margin-top: 18px;
margin-left: 50px;
height: 446px;
}
.formMain form{
color: #757575;
text-align: right;
}
.formMain .info{
margin: 18px auto;
}
.formMain .info input{
width: 150px;
}
.formMain .info select{
width: 150px;
}
.formMain .info .star{
color: #f00;
position: absolute;
/* display: none; */
}
.formMain .btn{
background-color: #4f81c7;
font-size: 20px;
width: 80px;
height: 40px;
line-height: 40px;
color: #fff;
border: 1px solid #757575;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="formContent">
<p class="title">用户注册</p>
<div class="formMain">
<form action="">
<p class="info">
用户名：<input type="text" id="username"><span class="star">*</span>
</p>
<p class="info">
登录密码：<input type="text" id="password"><span class="star">*</span>
</p>
<p class="info">
确定密码：<input type="text" id="conPwd"><span class="star">*</span>
</p>
<p class="info">
姓名：<input type="text" id="name"><span class="star">*</span>
</p>
<p class="info">
性别：<select name="sex" id="sex">
<option value="boy">男</option>
<option value="girl">女</option>
<option value="hide">隐藏</option>
</select>
</p>
<p class="info">
身份证号码：<input type="text" id="userId"><span class="star">*</span>
</p>
<p class="info">
邮箱：<input type="text" id="email"><span class="star">*</span>
</p>
<p class="info">
手机号：<input type="text" id="phone"><span class="star">*</span>
</p>
<button type="submit" class="btn" id="btn">提交</button>
</form>
</div>
</div>
<script>
// 获取元素
var getElem = function( selector ){
return document.querySelector(selector);
}
var mainElem = {
username:getElem("#username"),
password:getElem("#password"),
conPwd:getElem("#conPwd"),
name:getElem("#name"),
userId:getElem("#userId"),
email:getElem("#email"),
phone:getElem("#phone"),
btn:getElem('#btn'),
inputs:document.getElementsByTagName("input"),
stars:document.getElementsByClassName('star')
};
// 正则表达式
var pattern = {
username:/^[a-zA-Z]\w{5,19}$/,
password:/^\S{6,18}$/,
conPwd:/^\S{6,18}$/,
name:/^[\u4e00-\u9fa5]{2,4}$/,
userId:/^[1-9]{1}\d{14}$|^[1-9]{1}\d{16}(\d|[xX])$/,
email:/^(?:\w+\.)*(\w+)@(?:\w+\.)+([a-zA-Z])+$/,
phone:/^13\d{9}|147\d{8}$|15[0,1,2,3,5,6,7,8,9]{1}\d{8}$|18[0,2,5,6,7,8,9]{1}\d{8}$/
};
// 错误时的提示文本
var error = [
'6-20位字母、数字或“_”，字母开头',
'6-18位，包括数字字母或符号，中间不能有空格',
'请确认密码',
'真实姓名为2-4位中文',
'请输入15或18位的身份证号码',
'邮箱格式不正确，例如2019112@qq.com',
'手机号码格式不正确'
];
mainElem.username.focus();
// 封装一个函数，判断输入的信息是否符合要求
function judge(ele,reg,idx){
var newStar = mainElem.stars[idx];
if(reg.test(ele.value)){
newStar.innerHTML = "OK";
newStar.style.color = "green";
}else{
newStar.innerHTML = error[idx];
newStar.style.color = "red";
}
}
// event对象跨浏览器兼容
var EventUtil = {
addHandler: function(element, type, handler) {
//绑定事件
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler
}
}
}
// 验证用户名是否符合要求 6-20位字母、数字或“_”，字母开头
EventUtil.addHandler(mainElem.username,'blur',function(){
return judge(mainElem.username,pattern.username,0);
})
// 验证登录密码是否符合要求 6-18位，包括数字字母或符号，中间不能有空格
EventUtil.addHandler(mainElem.password,'blur',function(){
return judge(mainElem.password,pattern.password,1);
})
// 验证确认密码是否与登录密码一致
EventUtil.addHandler(mainElem.conPwd,'blur',function(){
if(mainElem.password.value !=mainElem.conPwd.value){
mainElem.stars[2].innerHTML = "两次密码不一致";
mainElem.stars[2].style.color = "red";
mainElem.conPwd.focus();
}else{
return judge(mainElem.conPwd,pattern.conPwd,2);
}
})
// 验证姓名是否符合要求 两位到四位的中文
EventUtil.addHandler(mainElem.name,'blur',function(){
return judge(mainElem.name,pattern.name,3);
})
// 验证身份证号码是否符合要求 15位或18位身份证号
EventUtil.addHandler(mainElem.userId,'blur',function(){
return judge(mainElem.userId,pattern.userId,4);
})
// 验证邮箱是否符合要求
EventUtil.addHandler(mainElem.email,'blur',function(){
return judge(mainElem.email,pattern.email,5);
})
// 验证手机号是否符合要求
EventUtil.addHandler(mainElem.phone,'blur',function(){
return judge(mainElem.phone,pattern.phone,6);
})
var list = mainElem.inputs;
// 判断所有输入框是否都符合表达式
function allConfirm(){
var str = list[i].value;
var reg = pattern[list[i].id];
var isResult = true;
for(var i = 0;i < list.length;i++){
isResult = isResult && reg.test(str);
}
return isResult;
}
// 给提交按钮绑定事件
EventUtil.addHandler(mainElem.btn,'click',function(){
var str = list[i].value;
var reg = pattern[list[i].id];
if(allConfirm()){
alert("注册成功！");
}else{
//遍历所有输入框，若不符合正则表达式，则显示错误文字
for(var i=0;i<list.length;i++){
if(!reg.test(str)){
mainElem.stars[i].innerHTML = error[i];
}
}
}
})
</script>
</body>
</html>提交按钮好像有点问题
其他部分代码有没有哪里还需要优化
2
收起
正在回答
2回答
你好同学，解答如下：
1.这个方法在小白入门阶段的《js事件》课程中提到过，不记得没有关系，这次记住就行。
很简单，直接记住event.preventDefault()是阻止元素的默认行为即可哦。
2. 邮箱，电话你可以按照你说的改一改类型，但是不改也没有关系，因为它们与text文本表现形式差不多，都是可见的。在html5 新的类型出现之前，就是使用text类型。但是密码如果是text类型，那么密码就能看到了。
而密码一般是不可见的，这个比较重要，所以老师让你专门改一下密码的类型。
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星