有三个问题在最底下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form验证表单</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family: "微软雅黑";
            font-size:12px;
        }
        label{
            font-weight: bold;
            margin-right:20px;
            text-align:right;
        }
        input{
            width:300px;
            height:30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        p{
            visibility: hidden;
            display: block;
            margin-top:5px;
            margin-left:50px;

            color: rgb(220,220,220);
            font-size:10px;
        }
        .box{
            margin-bottom: 20px;
            text-align: center;
        }
        .btn{
            width:70px;
            height:30px;

            background:rgb(45,121,183);
            color: #fff;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;

            border:0;
            border-radius: 5px;
        }





    </style>
</head>
<body>
    <form action="#" class="wrap" id="wrap">
        <div class="box">
            <label for="name">名称</label>
            <input type="text" class="name" id="name">
            <p class="prompt" id="prompt1">必填，长度为4—16个字符</p>
        </div>
        <div class="box">
            <!--密码-->
 <label for="pwd">密码</label>
            <input type="text" class="pwd" id="pwd">
            <p class="prompt" id="prompt2">密码不能为空</p>
        </div>
        <div class="box">
            <!--重复密码-->
 <label for="pwd2">密码确认</label>
            <input type="text" class="pwd2" id="pwd2">
            <p class="prompt" id="prompt3">密码不能为空</p>
        </div>
        <div class="box">
            <!--邮箱-->
 <label for="email">邮箱</label>
            <input type="text" class="email" id="email">
            <p class="prompt" id="prompt4">邮箱不能为空</p>
        </div>
        <div class="box">
            <!--手机号-->
 <label for="phone">手机</label>
            <input type="text" class="phone" id="phone">
            <p class="prompt" id="prompt5">手机号不能为空</p>
        </div>
        <div class="box">
            <button type="button" class="btn" id="btn">提交</button>
        </div>
    </form>
</body>
<script>
//    <!--获取焦点、失去焦点、点击按钮-->
//    1.通过id进行监听，显示验证信息
//    2.通过id进行监听，来完成对当前任务订单效验
//    3.通过点击btn按钮，来完成所有值的效验，并作出判断，进行false





var $=function(id){
    return document.getElementById(id);
};


//捕获焦点
$("wrap").addEventListener("focus",checkFocus,true);
$("wrap").addEventListener("blur",checkBlue,true);
$("btn").addEventListener("click",function(){
    if(/*所有时间都为true*/){
        alert("注册成功");
    }else{
        alert("注册失败") //提示哪里出问题？
 }
});

function checkFocus(ev){
    var e=ev||window.event;
    var inputs=e.target||e.srcElement;
    switch (inputs.id){
        case "name":
            $("prompt1").style.visibility="visible";
            break;
        case "pwd":
            $("prompt2").style.visibility="visible";
            break;
        case "pwd2":
            $("prompt3").style.visibility="visible";
            break;
        case "email":
            $("prompt4").style.visibility="visible";
            break;
        default:
            $("prompt5").style.visibility="visible";

    }
}

function checkBlue(ev){
    var e=ev||window.event;
    var inputs=e.target||e.srcElement;
    if(inputs.nodeName.toLocaleLowerCase()=="input"){
        switch (inputs.id){
            case "name":
                checkName(inputs);
                break;
            case "pwd":
                checkPwd(inputs);
                break;
            case "pwd2":
                checkPwd2(inputs);
                break;
            case "email":
                checkEmail(inputs);
                break;
            default:
                checkPhone(inputs);
        }
    }
}

//效验(node相当于inputs)
function checkName(node){
    if(!node.value){
        $("prompt1").innerHTML ="不能为空";
        node.style.borderColor="red";
    }else if(checkCount(node.value)<4 ||checkCount(node.value)>16){
        $("prompt1").innerHTML ="4-16位之间";
        node.style.borderColor="red";
    }else{
        $("prompt1").innerHTML ="输入正确";
        node.style.borderColor="green";
    }
}

//验证4-16位
function checkCount(str){
    var count=0;
    for(var i=0;i<str.length;i++){
        if(str[i].charCodeAt()>=0 &&str[i].charCodeAt()<=128){
            count++;
        }else{
            count +=2;
        }
    }
    return count;
}

//验证密码(1.不能为空、2.正确)
function checkPwd(node){
    if(!node.value){
        $("prompt2").innerHTML ="不能为空";
        node.style.borderColor="red";
    }else{
        $("prompt2").innerHTML ="输入正确";
        node.style.borderColor="green";
    }
}

//验证密码2(1.不能为空，2两次不一致3.两次一致)
function checkPwd2(node){
    if(!node.value){
        $("prompt3").innerHTML ="不能为空";
        node.style.borderColor="red";
    }else if(node.value == $("pwd").value){
        $("prompt3").innerHTML ="两次输入一致";
        node.style.borderColor="green";
    }else{
        $("prompt3").innerHTML ="两次输入不一致";
        node.style.borderColor="red";
    }
}

function checkEmail(node){
    if(!node.value){
        $("prompt4").innerHTML ="不能为空";
        node.style.borderColor="red";
    }else if(!/^[\w\d]+@[\w\d]+(\.[\w]{2,3})+$/.test(value)){
        $("prompt4").innerHTML ="格式错误";
        node.style.borderColor="red";
    }else{
        $("prompt4").innerHTML ="正确";
        node.style.borderColor="green";
    }
}

function checkPhone(node) {
    if (!node.value) {
        $("prompt5").innerHTML = '手机号码不能为空!';
        $("prompt5").style.color = 'red';
        node.parentNode.style.border = '2px solid red';
    }
    else if (/^1[3-9]{2}[\d]{8}/.test(node.value)) {
        $("prompt5").innerHTML = '手机号码格式正确!';
        node.style.border = '1px solid green';
    }
    else {
        $("prompt5").innerHTML = '手机号码格式不正确!';
        node.style.border = '1px solid red';
    }
}


</script>
</html>
问题1：当点击提交按钮的时候，怎么判断的条件？
问题2：如果判断失败，怎么能显示出提示出的问题？
问题3：label中的重置密码怎么和其他右对齐？
19990000
浏览 1146回答 1
1回答

Sxy97
小白表达观点啊，欢迎指错。问一：获取焦点不应该获取form标签上的，而是input上的。当文本框失去焦点时触发对格式的判断，提交按钮判断的只是密码正确与否。问二:我觉得你的代码可以显示。问三:不知道):
0 0
随时随地看视频慕课网APP