4-8编程练习代码：老师检查一下，代码有没有可以优化的地方

首页课程实战体系课手记专栏慕课教程

来源：4-8 编程练习

慕移动3569406

2020-01-20 19:49:50

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{margin: 0; padding: 0;}

.header{

width: 1200px;

height: 50px;

margin: 0 auto;

line-height: 50px;

background: cornflowerblue;

color: #fff;

}

.header span{

margin-left: 20px;

}

.main{

width: 1200px;

margin: 0 auto;

background: #ccc;

overflow: hidden;

}

.main-inner{

width:254px;

margin: 20px auto;

}

.main-input{

position: relative;

margin-bottom: 15px;

}

.main-input_label{

float: left;

width: 85px;

padding-right: 15px;

text-align: right;

}

.main-input_input{

width: 150px;

vertical-align: top;

}

.main-input_tips{

position:absolute;

left: 264px;

top: 0;

white-space: nowrap;

color: #f00;

}

.main-submit{

text-align: center;

}

.main-submit_input{

width: 75px;

height: 30px;

border: none;

border-radius: 3px;

background: cornflowerblue;

color: #fff;

}

</style>

</head>

<body>

</header>

</div>

</div>

</div>

</div>

</select>

</div>

<span class="main-input_label">身份证号码:</span>

</div>

</div>

</div>

</div>

</form>

</div>

</section>

var $ = function(selector){

if(/\s|\[|\]/.test(selector)){

return document.querySelectorAll(selector);

}

return document.querySelector(selector);

}

var input = {

userName:{

title: "username",

elem:$("#main-input_input-userName"),

pattern: /^[a-z][\w]{5,19}$/i,

error: '要求用户名是6-20位字母、数字或“_”,字母开头'

psw: {

title: "psw",

elem:$("#main-input_input-psw"),

pattern: /^[^\s\u4e00-\u9fa5]{6,18}$/,

error: '要求密码6-18位，包括数字字母或符号，中间不能有空格。'

psw2: {

title: "psw2",

elem:$("#main-input_input-psw2")

realName:{

title: "realName",

elem:$("#main-input_input-realName"),

pattern: /^[\u4e00-\u9fa5]{2,4}$/,

error: '要求是真实姓名，两位到四位的中文汉字，失去光标就进行判断'

sex: {

title: "sex",

elem:$("#main-input_input-sex")

id: {

title: "id",

elem:$("#main-input_input-id"),

// /^(\d{15}|\d{17}[X|\d])$/i 其实是将表达式分成三份: ^\d{15} 、\d{17}[X\d]$ 这明显不是正确的

pattern: /^(\d{15}|\d{17}[X\d])$/,

error: '要求15位或者18位的数字，18位时最后一位可能是x'

email: {

title: "email",

elem:$("#main-input_input-email"),

pattern: /^[\w-]+@([-a-z]+\.)+[a-z]{2,}$/i,

error: '邮箱的格式不正确'

tel: {

title: "tel",

elem:$("#main-input_input-tel"),

pattern: /^1(3\d|47|5[012356789]|8[0256789])\d{8}$/,

error: '请正确填写手机号码格式'

}

var each = function(obj, fn){

for(var i in obj){

fn(obj[i], i);

}

// 添加input验证事件。

function eachInputAddEventListener(){

each(input, function(inputObj, key){

inputObj.elem.addEventListener('blur', function(e){

formValidByInputObj(inputObj);

})

}

// 验证表单。

function formValidByInputObj(inputObj){

var inputElem = inputObj.elem;

var pattern = inputObj.pattern;

var key = inputObj.title;

var errorTxt = inputObj.error;

var inputValue = inputElem.value;

var tipsElem = getInputTips(inputElem);

var isTest = false;

if(key=="sex"){

isTest = true;

}else if(key=="psw2"){

isTest = PasswordTest()

}else if(pattern.test(inputValue)){

updateInputTips(tipsElem, "OK")

isTest = true;

}else{

updateInputTips(tipsElem, errorTxt);

isTest = false;

}

return isTest;

}

// 获取input-tips

function getInputTips(input){

return input.parentNode.querySelector('.main-input_tips');

}

// 更新input-tips

function updateInputTips(tipsElem, tipTxt){

tipsElem.innerHTML = tipTxt;

}

// 密码验证

function PasswordTest(){

var pswValue = input.psw.elem.value;

var psw2Value = input.psw2.elem.value;

var pswPattern = input.psw.pattern;

var tipsElem = getInputTips(input.psw2.elem);

if(isBlank(psw2Value)){

updateInputTips(tipsElem, "密码不能为空");

return false;

}

if(pswValue === psw2Value){

updateInputTips(tipsElem, "OK")

return true;

}else{

updateInputTips(tipsElem, "两次输入密码不一致")

return false;

}

// 提交表单。执行所有验证，并阻止表单提交。

function submitHandler(e){

var isTest = true;

each(input, function(inputObj, key){

if(!formValidByInputObj(inputObj)){

isTest = false;

}

});

isTest ? alert("感谢注册！！") : e.preventDefault();

}

// 判断文本是否包含空格，以及内容是否为空

function isBlank(str){

return str==""||/^\s+$/g.test(str);

}

window.onload = function(){

// 添加input的验证事件。

eachInputAddEventListener()

$("#main-form").addEventListener("submit", submitHandler)

}

function getInputKeyFormElemId(className){

return /-([\w]+$)/.exec(className)[1] || "";

}

</script>

</body>

</html>

写回答

1回答

好帮手慕言

2020-01-21

同学你好，效果是正确的，代码也很简洁，不用优化了，继续加油，祝学习愉快~

0 学习 · 14456 问题

查看课程

相似问题

4-8 练习, 代码还有那些需要优化的地方,给点意见

回答 2

4-8-编程练习，blur事件如何简化优化呢？

回答 2

老师这么简单的编程练习，为什么我会写出这么多代码？怎么精简一下

回答 1

检查一下代码

回答 1

老师，我的问题是本节的4-8编程练习。

回答 2

打开慕课网App查看更多内容