请老师看下
来源：4-8 编程练习
qq_慕九州2374973
2019-12-18 21:45:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除样式*/
*{
margin:0;
padding:0;
}
body,html{
width:100%;
}
.word{
margin-top: 30px;
display: inline-block;
width: 100px;
height: 20px;
text-align: right;
}
input{
display: inline-block;
text-align: justify-all;
height: 20px;
margin-top: 30px;
margin-left: 6px;
}
/*设置标题样式*/
#header{
width:100%;
height:36px;
background:#1e90ff;
font-size:20px;
line-height:36px;
color:white;
padding-left:10px;
font-family:"微软雅黑",serif;
}
/*设置整体样式*/
#sub{
background:#d3d3d3;
width:100%;
}
#sub1{
width:1200px;
height:800px;
margin:0 auto;
padding-top: 50px;
text-align: center;
}
.button{
display: block;
width: 80px;
height: 40px;
background: red;
color: white;
font-size: 18px;
text-align: center;
border: none;
border-radius: 6px;
margin: 60px auto;
}
.button:hover{
cursor: pointer;
}
.span,.span1,.span2,.span3,.span4,.span5,.span6{
display: inline-block;
width: 200px;
color:red;
margin-left: 6px;
margin-top: 30px;
font-size: 10px;
text-align: left;
}
</style>
</head>
<body>
<div id="main">
<header id="header">用户注册</header>
<section id="sub">
<form action="">
<div id="sub1">
<span class="word">用户名：</span><input type="text" name="userName" placeholder="请输入用户名" class="input"><span class="span"></span><br>
<span class="word">登录密码：</span><input type="password" name="pwd" placeholder="请输入密码" class="input1"><span class="span1"></span><br>
<span class="word">确认密码：</span><input type="password" name="confirmPwd" placeholder="请再次输入密码" class="input2"><span class="span2"></span><br>
<span class="word">姓名：</span><input type="text" name="realName" placeholder="请输入姓名" class="input3"><span class="span3"></span><br>
<span class="word">身份证号码：</span><input type="text" name="id" placeholder="请输入身份证号码" class="input4"><span class="span4"></span><br>
<span class="word">邮箱：</span><input type="text" name="email" placeholder="请输入邮箱" class="input5"><span class="span5"></span><br>
<span class="word">手机号码：</span><input type="text" name="phoneNumber" placeholder="请输入手机号" class="input6"><span class="span6"></span><br>
<input type="button" value="提交" id="button" class="button input7">
</div>
</form>
</section>
</div>
<script type="text/javascript">
(function(){
//获取元素
var wrapElem = document.querySelector("#sub1");
//获取input
var inputsDom = {
//用户名
userNameInput:wrapElem.querySelector(".input"),
//密码
pwdInput:wrapElem.querySelector(".input1"),
//确认密码
confirmPwdInput:wrapElem.querySelector(".input2"),
//姓名
realNameInput:wrapElem.querySelector(".input3"),
//身份证
idInput:wrapElem.querySelector(".input4"),
//邮箱
emailInput:wrapElem.querySelector(".input5"),
//手机号
phoneNumberInput:wrapElem.querySelector(".input6"),
};
//提交按钮
var submitInput = document.querySelector("#button");
//获取span
var spanDom = {
userNameSpan:wrapElem.querySelector(".span"),
pwdSpan:wrapElem.querySelector(".span1"),
confirmPwdSpan:wrapElem.querySelector(".span2"),
realNameSpan:wrapElem.querySelector(".span3"),
idSpan:wrapElem.querySelector(".span4"),
emailSpan:wrapElem.querySelector(".span5"),
phoneNumberSpan:wrapElem.querySelector(".span6")
};
//pattern
var allPattern = {
userNamePattern: /^[a-z]\w{5,19}$/ig,
pwdPattern:/^\S{6,18}$/ig,
confirmPwdPattern:/^\S{6,18}$/ig,
realNamePattern:/^[\u4e00-\u9fa5]{2,4}$/,
idPattern:/^(\d{15}|(\d{17}[\dXx]))$/,
emailPattern:/^\w+([-_.]\w+)*@\w+([-_.]\w+)*\.\w{2,}$/,
phoneNumberPattern:/^(13|15|16|17|18|19)\d{9}$/
};
//得到焦点input value为空的提示
var onfocusBlankTips = {
userNameBlankTips:"请输入您的用户名",
pwdBlankTips:"请输入您的密码",
confirmPwdBlankTips:"请再次输入密码",
realNameBlankTips:"请输入您的姓名",
idBlankTips:"请输入您的身份证号码",
emailBlankTips:"请输入您的邮箱",
phoneNumberBlankTips:"请输入您的电话号码"
};
//失去焦点input value为空的提示
var onblurBlankTips = {
userNameBlankTips:"用户名为空",
pwdBlankTips:"密码为空",
confirmPwdBlankTips:"确认密码为空",
realNameBlankTips:"姓名为空",
idBlankTips:"身份证号码为空",
emailBlankTips:"邮箱为空",
phoneNumberBlankTips:"手机号码为空"
};
//错误提示
var errorTips = {
userNameTips:"6-20位字母、数字或“_”,字母开头",
pwdTips:"6-18位数字字母或符号",
confirmPwdTips:"密码错误",
realNameTips:"2-4位汉字",
idTips:"15或18位身份证号码",
emailTips:"邮箱错误！",
phoneNumberTips:"11位手机号！"
};
//类型，提示字符串
var str = {
strPattern:"Pattern",
strSpan:"Span",
strTips:"Tips",
strBlankTips:"BlankTips",
strFlag:"Flag"
};
//状态标志
var flags = {
userNameFlag:false,
pwdFlag:false,
confirmPwdFlag:false,
realNameFlag:false,
idFlag:false,
emailFlag:false,
phoneNumberFlag:false
};
//颜色字符串
var strColor = {
colorError:"red",
colorBlankOnfocus:"green",
colorBlankOnblur:"#FF8C00",
colorSuccess:"#FF4500"
};
//css类型字符串
var typeCss = {
type1:"color",
// type2:"fontSize"
};
//输出函数
var outPut = {
//输出提示
outPutTipsOrError:function(ele,tip){
return ele.innerHTML = tip;
},
//输出ok
outPutOk:function(elem) {
return elem.innerHTML = "ok";
}
};
//改变css
var change = {
//改变css样式(怎么封装改变多个样式的函数)
changeCssType:function(elem,attr,value){
//elem可能是个数组，也可是个dom对象
if(elem.length){//一组数据设置同一样式
for(var i =0,len = elem.length;i < len;i++){
elem[i].style[attr] = value;
}
return elem;
}
//elem是dom对象
elem.style[attr] = value;
return elem;
}
};
for(var i in inputsDom){
//鼠标获得焦点
inputsDom[i].onfocus = function(){
//输出提示
outPut.outPutTipsOrError(spanDom[this.name + str.strSpan],onfocusBlankTips[this.name + str.strBlankTips]);
// 改变字体颜色
change.changeCssType(spanDom[this.name + str.strSpan],typeCss.type1,strColor.colorBlankOnfocus);
};
//鼠标失去焦点
inputsDom[i].onblur = function(){
// 判断
if(this.value === ""){
//输出空提示
outPut.outPutTipsOrError(spanDom[this.name + str.strSpan], onblurBlankTips[this.name + str.strBlankTips]);
// 改变字体颜色
change.changeCssType(spanDom[this.name + str.strSpan],typeCss.type1,strColor.colorBlankOnblur);
}else {
//判断
if(allPattern[this.name + str.strPattern].exec(this.value)){
//设置状态
flags[this.name + str.strFlag] = true;
//输出提示
outPut.outPutOk(spanDom[this.name + str.strSpan]);
//改变字体颜色
change.changeCssType(spanDom[this.name + str.strSpan], typeCss.type1, strColor.colorSuccess);
}else{
//输出错误提示
outPut.outPutTipsOrError(spanDom[this.name + str.strSpan],errorTips[this.name + str.strTips]);
//改变字体颜色
change.changeCssType(spanDom[this.name + str.strSpan], typeCss.type1, strColor.colorError);
}
}
};
}
// 点击提交按钮(全部input未输入直接点击，怎么显示提示内容)
submitInput.onclick = function () {
for(var j in flags){
if(!flags[j]){
alert("error");
return;
}else{
confirm("确认提交吗");
}
return;
}
};
})();
</script>
</body>
</html>请老师看下还有无可以优化的地方，并请老师帮忙解决注释中的问题
写回答
2回答
-
qwertyuiopl
2019-12-19
兄弟你好厉害呀，看了下你的代码写的太精简了，你提出的其他几个需求都没办法往上加。建议你把它们分开写，这样条理清楚，例如这个：https://class.imooc.com/course/qadetail/161096这样虽然没有你的方法简单，但是胜在条理清晰，其他需求也容易添加。而且听工作朋友说，验证页面的需求一般是不会变化的，所以不会写的忒复杂....
0h019-12-19 -
qq_慕九州2374973
提问者
2019-12-18
老师，我还有个想法。重新回到验证成功的的输入框时，提示ok，当作修改时，提示：请输入****；第二次获取鼠标焦点该怎么实现，
0
相似问题