supce's blog

IFE Task 16

发表于  |    |  

任务目的

  • 加强对JavaScript的掌握
  • 熟悉常用表单处理逻辑

任务描述

  • 在页面中添加多个表单
  • 要求:
  • 表单获得焦点时，下方显示表单填写规则
  • 表单失去焦点时校验表单内容
  • 校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
  • 校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
  • 点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”

整体思路

主要是对于表单的输入检验和文本提示，可以将文本提示放在HTML中，并将它们隐藏。然后根据不同的检测结果显示不同的提示。

<form id="register">
    <p id="userName">
        <label>用户名</label><input type="text" name="">
        <span class="prompt">中英文均可，4-16个字符</span>
        <span class="checkErr">必填！中英文均可，4-16个字符</span>
        <span class="checkSucc"></span>
    </p>
    <p id="pwd">
        <label>密码</label><input type="text" name="">
        <span class="prompt">6-16个字符</span>
        <span class="checkErr">必填！6-16个字符</span>
        <span class="checkSucc"></span>
    </p>
    <p id="confirmPwd">
        <label>确认密码</label><input type="text" name="">
        <span class="prompt">请再次填写密码</span>
        <span class="checkErr">密码不一致</span>
        <span class="checkSucc"></span>
    </p>
    <p id="email">
        <label>邮箱</label><input type="text" name="">
        <span class="prompt">example@ife.com</span>
        <span class="checkErr">邮箱格式不正确</span>
        <span class="checkSucc"></span>
    </p>
    <p id="tel">
        <label>手机号</label><input type="text" name="">
        <span class="prompt">请输入11位手机号码</span>
        <span class="checkErr">手机号码格式不正确</span>
        <span class="checkSucc"></span>
    </p>
    <button id="submitBtn" type="submit">提交</button>
</form>

然后设置以下基本样式

#register label{
    width:80px;
    padding: 0 8px;
    display: inline-block;
    text-align: right;
    font: normal 16px/16px arial,sans-serif;
    color: #333;
}
#register input{
    height: 20px;
}
.inputErr{
    border: 1px solid red;
}
#submitBtn{
    width: 60px;
    height: 30px;
    color: white;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background-color: #5cb85c;
}
#submitBtn:hover{
    background-color: #449d44;
}
.prompt{
    font: normal 10px/10px arial,sans-serif;
    color: #999;
}
.checkErr{
    font: normal 10px/10px arial,sans-serif;
    color: red;
}
.checkSucc{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url(icon/check.png) no-repeat;
    display: inline-block;
}
.hidden{
    display: none;
}

对于检测，可以写一个检测工具类

//表单检测工具包
var CheckUtil = {
    //获取字符串长度
    getLength : function(str){
        var strLen = 0;
        for(var i=0,len=str.length;i<len;i++){
            var char = str.charCodeAt(i);
            if(char >=0 && char <= 128){
                strLen += 1;
            }else{
                strLen += 2;
            }
        }
        return strLen;
    },
    //检测用户名
    checkName : function(input){
        var parent = input.parentNode;
        var value = input.value;
        var len = CheckUtil.getLength(value);
        if(len >=4 && len <=16){
            return true;
        }else{
            return false;
        }
    },
    //检测密码
    checkPwd : function(input){
        var parent = input.parentNode;
        var value = input.value;
        var len = CheckUtil.getLength(value);
        var ns = get_nextsibling(parent);
        var nsValue = ns.getElementsByTagName("input")[0].value;
        if(value !== nsValue){
            console.log(ns);
            ns.querySelector(".checkErr").classList.remove("hidden");
        }
        if(len >= 6 && len <=16){
            return true;
        }else{
            return false;
        }
        function get_nextsibling(n){
            var x=n.nextSibling;
            while (x.nodeType!=1){
                x=x.nextSibling;
            }
            return x;
        }
    },
    //确认密码
    confirmPwd : function(input){
        var parent = input.parentNode;
        var value = input.value;
        var ps = get_previoussibling(parent);
        var psValue = ps.getElementsByTagName("input")[0].value;
        if((value !== psValue) || (value == "")){
            return false;
        }else{
            return true;
        }

        function get_previoussibling(n){
            var x=n.previousSibling;
            while (x.nodeType!=1){
                x=x.previousSibling;
            }
            return x;
        }
    },
    //检测email
    checkMail : function(input){
        var email = input.value.replace(/^\s+|\s+$/g,"").toLowerCase();//去除前后空格并转小写
        var reg=/^[a-z0-9](\w|\.|-)*@([a-z0-9]+-?[a-z0-9]+\.){1,3}[a-z]{2,4}$/i;
        if(email.match(reg) == null){
            return false;
        }else{
            return true;
        }
    },
    //检测手机号码
    checkTel : function(input){
        var phone = input.value;
        if(!(/^1[34578]\d{9}$/.test(phone))){ 
            return false; 
        }else{
            return true;
        } 
    },
}

然后隐藏所有的提示

//span初始化
function initSpan(node){
    var spans = node.getElementsByTagName("span");
    for(var i=0,len=spans.length;i<len;i++){
        spans[i].classList.add("hidden");
    }
    var input = node.getElementsByTagName("input")[0];
    input.classList.remove("inputErr");
}
//隐藏所有span
initSpan($("register"));

并且为input添加focus和blur事件

//input添加事件
var inputs = $("register").getElementsByTagName("input");
for(var i=0,len=inputs.length;i<len;i++){
    //获得焦点时清除内容并且显示提示
    addHandler(inputs[i],"focus",function(e){
        e.target.value = "";
        var parent = e.target.parentNode;
        initSpan(parent);
        var prompt = parent.querySelector(".prompt");
        prompt.classList.remove("hidden");
    });
    //失去焦点时检测并提示
    addHandler(inputs[i],"blur",function(e){
        var input = e.target;
        check(input);
    });
}
function check(input){
    var parent = input.parentNode;
    var result = null;
    initSpan(parent);
    switch(parent.id){
        case "userName":result = CheckUtil.checkName(input);break;
        case "pwd":result = CheckUtil.checkPwd(input);break;
        case "confirmPwd":result = CheckUtil.confirmPwd(input);break;
        case "email":result = CheckUtil.checkMail(input);break;
        case "tel":result = CheckUtil.checkTel(input);break;
    }
    if(result){
        parent.querySelector(".checkSucc").classList.remove("hidden");
    }else{
        input.classList.add("inputErr");
        parent.querySelector(".checkErr").classList.remove("hidden");
    }
}

最后给button添加检测事件

//提交按钮
addHandler($("submitBtn"),"click",function(){
    checkAll();
});
function checkAll(){
    var inputs = $("register").getElementsByTagName("input");
    for(var i=0,len=inputs.length;i<len;i++){
        var parent = inputs[i].parentNode;
        var result = true;
        initSpan(parent);
        switch(parent.id){
            case "userName":result = result & CheckUtil.checkName(inputs[i]);break;
            case "pwd":result = result & CheckUtil.checkPwd(inputs[i]);break;
            case "confirmPwd":result = result & CheckUtil.confirmPwd(inputs[i]);break;
            case "email":result = result & CheckUtil.checkMail(inputs[i]);break;
            case "tel":result = result & CheckUtil.checkTel(inputs[i]);break;
        }
    }
    if(result){
        alert("成功");
    }else{
        alert("失败");
    }
}

突然想起高中时代玩的网游aion，逛逛天族的风景 看看贝鲁斯兰的雪 听听幻影神圣所的静谧音乐

最终代码

最终代码
demo