使用 Javascript 输入错误时更改边框颜色答案

【问题标题】：Changing Border Color When Incorrect Input With Javascript使用 Javascript 输入错误时更改边框颜色
【发布时间】：2014-10-06 20:58:03
【问题描述】：

我正在处理一个表单，当用户单击“提交”按钮时，它应该验证多个文本框中的输入。如果任何所需的框留空或输入类型或格式不正确，则这些文本框的边框应变为红色并在满足要求时恢复正常颜色。

例如，一个电话号码应该是 7 位或 10 位数字，如果用户输入一个六位数字，例如 (123456)，当用户再输入一个数字时，该字段周围的边框应该变为红色，像 (1234567) 一样，边框应该立即恢复为常规颜色，而无需用户再次单击“提交”按钮。

我的代码是如何编写的，当用户输入的数字太少时，边框会变成红色，但是，必须单击提交按钮才能使边框恢复其原始颜色。有没有办法在不再次单击按钮的情况下更改颜色？

这是我的代码：

<html>
    <head>
        <title>Project 4</title>

        <style type="text/css">
            .error {
                border:2px solid red;
            }
        </style>
    </head>

    <body>
        <form name="myForm" onsubmit="return validateForm()">
            Phone Number:<input type="text" id="phone">
            <br>
            <input type="submit" value="Submit">
        </form>

        <script type="text/javascript">
            function validateForm() {
                return checkPhone();
            }

            function checkPhone() {
                var phone = document.forms["myForm"]["phone"].value;
                var phoneNum = phone.replace(/[^\d]/g, '');
                if(phoneNum.length > 6 && phoneNum.length < 11) {   
                    return true;
            } 
                else if(phoneNum.length < 7 || phoneNum.length > 10) {
                    //document.getElementById("phone").className = document.getElementById("phone").className + " error";
                    //document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
                document.getElementById("phone").style.borderColor="red";

                return false;

                }
            }
        </script>
    </body>
</html>

【问题讨论】：

你应该看看 javascript 插件 "Parsley" (parsleyjs.org)
你可以使用 JQuery 或验证库吗？
不，我不能使用 JQuery，我们的教授告诉我们，当我们在本学期晚些时候复习时，我们会想杀了他，因为它会完成所有这些项目轻松多了哈哈。

标签： javascript html css validation

【解决方案1】：

一旦用户提交了带有无效数据的表单，您可以将onkeyup 事件监听器附加到输入字段中，并且每次用户在该字段中输入内容时，表单都会被验证

document.getElementById("phone").onkeyup = validateForm;

我特意写了once a user submits the form，因为您不想通过知道他只输入一个字符并且收到验证错误来欺骗您的访问者。（他要再输入 5 个字符）

编辑：

<html>
<head>
    <title>Project 4</title>

    <style type="text/css">
        .error {
            border:2px solid red;
        }
    </style>
</head>

<body>
    <form name="myForm" onsubmit="return validateForm()">
        Phone Number:<input type="text" id="phone">
        <br>
        <input type="submit" value="Submit">
    </form>

    <script type="text/javascript">

    //at first, we define a variable stating that an event listener has been attached onto the field
    var validatePhoneOnKeyUpAttached = false;

        function validateForm() {

            //then, we attach the event listened to the field after the submit, if it has not been done so far
            if(!validatePhoneOnKeyUpAttached) {
                document.getElementById("phone").onkeyup = checkPhone;
                validatePhoneOnKeyUpAttached = true;
            }

            return checkPhone();
        }

        function checkPhone() {
            var phone = document.forms["myForm"]["phone"].value;
            var phoneNum = phone.replace(/[^\d]/g, '');
            if(phoneNum.length > 6 && phoneNum.length < 11) {   
                document.getElementById("phone").style.borderColor="transparent";//and you want to remove invalid style
                return true;
        } 
            else if(phoneNum.length < 7 || phoneNum.length > 10) {
                //document.getElementById("phone").className = document.getElementById("phone").className + " error";
                //document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
            document.getElementById("phone").style.borderColor="red";

            return false;

            }
        }
    </script>
</body>

【讨论】：

谢谢，这实际上回答了我正要问其他 cmets 的一个问题。
我在确定代码中的哪个位置时遇到了一些麻烦，因为它是在单击提交按钮后发生的？
哦，好的，我明白了。再次感谢！
还有一件事，你想在返回 true 之前删除无效的样式让用户知道，他做得很好document.getElementById("phone").style.borderColor="transparent"

【解决方案2】：

您可以简单地为输入字段添加onkeyup 处理程序：

<input type="text" id="phone" onkeyup="checkPhone()" />

如果输入有效，还使checkPhone 函数删除error 类：

function checkPhone() {

    var phone = document.forms["myForm"]["phone"].value;
    var phoneNum = phone.replace(/[^\d]/g, '');

    if (phoneNum.length > 6 && phoneNum.length < 11) {
        document.getElementById("phone").className = '';
        return true;
    } 
    else if (phoneNum.length < 7 || phoneNum.length > 10) {
        document.getElementById("phone").className = 'error';
        return false;
    }
}

演示：http://jsfiddle.net/bcxLz4wh/

【讨论】：

【解决方案3】：

像这样使用输入的模糊事件：

<input type="text" id="phone" onblur="validateForm();">

当您的控件失去焦点时会运行模糊事件。如果您需要更即时的内容，则需要使用 keyup 事件。

【讨论】：