JavaScript:检查输入的值

JavaScript: Check value of input

本文关键字：输入 检查 JavaScript      更新时间：2023-09-26

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

.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"弹出窗口。

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

if (!name.value) {

或可能

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

。如果要忽略前导和尾随空格。

我喜欢使用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
    }
}

我希望它有所帮助！

相关文章：