Question

我正在处理一个表单，当用户点击＆＃34;提交＆＃34;时，该表单应该验证几个文本框中的输入。按钮。如果任何所需的框留空或输入或格式类型不正确，那么这些文本框的边框应该变为红色并在满足要求时返回正常颜色。

例如，电话号码应该是7或10位长，如果用户输入六位数字（123456），当用户输入另一个号码时，此字段周围的边框应变为红色，喜欢（1234567），边框应该立即回到它的常规颜色，用户不必点击＆＃34;提交＆＃34;按钮再次。

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

这是我的代码：

<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>

Answer 1

用户提交包含无效数据的表单后，您可以将onkeyup事件监听器附加到输入字段中，并且每隔一天用户在字段中键入内容，表单将被验证

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

我故意写了once a user submits the form，因为你不想通过知道他只键入一个字符并且他收到验证错误来欺骗你的访问者。（他即将打五个字符）

编辑：

<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>

Answer 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/

Answer 3

使用输入的模糊事件，如下所示：

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

当您失去焦点时，模糊事件会运行。如果你需要更直接的东西，你需要使用keyup事件。

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

3 个答案:

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