Question

以下是有关我的代码的一些信息：

HTML：

<input autocomplete="off" class="red" id="name" name="name" onclick="checkName(this);" onkeyup="checkName(this);" onblur="checkName(this);" placeholder="Name*">
<button type="submit" onClick="validateName();">SUBMIT YER WORK!</button>

CSS：

input.red:focus {
    background: #E45F56 !important;
    border: 1px solid #E45F56 !important;
}
input.false {
    background: #E45F56 !important;
    border: 1px solid #E45F56 !important;
}
input.true {
    background: #4aaaa5 !important;
    border: 1px solid #4aaaa5 !important;
}

JAVASCRIPT：

var status = 0;
var name = document.getElementById("name").value;

function checkName(name) {
    if (!name) {
        status = 0;
        name.classList.remove("red");
        name.classList.remove("true");
        name.classList.add("false");
    } else if (name) {
        status = 1;
        name.classList.remove("red");
        name.classList.remove("false");
        name.classList.add("true");
    }
}

function validateName() {
    if (status == 0) {
        window.location = "#fail";
        name.focus();
    } else if (status == 1) {
        window.location = "#submitted";
    }
}

整个想法是，如果您输入该输入字段，您将获得直接反馈，因为该字段变为红色或绿色。如果单击该按钮，将打开一个弹出窗口。

这段代码的唯一问题是，每次点击输入字段时，它都会变为绿色而不是红色。这意味着，如果我单击该按钮，将弹出“#submitted”-popup，即使我还没有输入任何内容。

Answer 1

name是对象的引用，因此!name始终为false。你可能想要

if (!name.value) {

或可能

if (!name.value.trim()) {

...如果你想忽略前导空格和尾随空格。

Answer 2

我喜欢使用jquery。它的语法更简单。您也可以使用模糊：

var name = $("#name").val();
name.blur(checkname);

然后使用函数：

function checkname(name){

    if(name.length < 4){ //if you type less than 4 chars
        name.css('border-color','#red');
        return false;
    }
    else if(name == ""){ //if the input is empty
        name.css('border-color','#red');
        return false;   
    }else{
      name.css('border-color','#green');
      return true; //validate the fields
    }

}

我希望它有所帮助！

JavaScript：检查输入值

2 个答案: