Question

我有一个注册表单，我希望有多个字段验证。我的意思是如果没有填充多个字段，它将突出显示为红色。我已经编写了一些代码但是没有突出显示未填写的字段，而是突出显示所有代码。我意识到它很长，但我对此很新。我的JS代码如下：

`function formCheck() {
    var val = document.getElementById("fillMeIn").value;
    var val = document.getElementById("fillMeIn2").value;
    var val = document.getElementById("fillMeIn3").value;
    var val = document.getElementById("fillMeIn4").value;
    var val = document.getElementById("fillMeIn5").value;
    var val = document.getElementById("fillMeIn6").value;
    var val = document.getElementById("fillMeIn7").value;
    if (val == "") {
        alert("Please fill in the missing fields");
        document.getElementById("fillMeIn").style.borderColor = "red";
        document.getElementById("fillMeIn2").style.borderColor = "red";
        document.getElementById("fillMeIn3").style.borderColor = "red";
        document.getElementById("fillMeIn4").style.borderColor = "red";
        document.getElementById("fillMeIn5").style.borderColor = "red";
        document.getElementById("fillMeIn6").style.borderColor = "red";
        document.getElementById("fillMeIn7").style.borderColor = "red";
        return false;
    }
    else {
        document.getElementById("fillMeIn").style.borderColor = "green";
        document.getElementById("fillMeIn2").style.borderColor = "green";
        document.getElementById("fillMeIn3").style.borderColor = "green";
        document.getElementById("fillMeIn4").style.borderColor = "green";
        document.getElementById("fillMeIn5").style.borderColor = "green";
        document.getElementById("fillMeIn6").style.borderColor = "green";
        document.getElementById("fillMeIn7").style.borderColor = "green";
    }
}`

我的HTML如下：

'<form id="mbrForm" onsubmit="return formCheck();" action="thanks.html" method="post">
                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-4 vertical-gap">
                                    FIRST NAME:
                                    <input id="fillMeIn" type="text" class="form-control" placeholder="First Name" >
                                </div>
                                <div class="col-md-4 vertical-gap">
                                    LAST NAME:
                                    <input id="fillMeIn2" type="text" class="form-control" placeholder="Last Name" >
                                </div>
                                <div class="col-md-2"></div>
                            </div> 

                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-8 vertical-gap">
                                    ADDRESS:
                                    <input id="fillMeIn3" type="text" class="form-control vertical-gap" placeholder="First Line" >
                                    <input id="fillMeIn4" type="text" class="form-control vertical-gap" placeholder="Second Line" >
                                    <input id="fillMeIn5" type="text" class="form-control vertical-gap" placeholder="Town/City" >
                                </div>
                                <div class="col-md-2"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-4 vertical-gap">
                                    POST CODE:
                                    <input id="fillMeIn6" type="text" class="form-control vertical-gap" placeholder="Postcode" >
                                </div>
                                <div class="col-md-4 vertical-gap">
                                    PHONE No:
                                    <input type="number" class="form-control vertical-gap" placeholder="Tel no">
                                </div>
                                <div class="col-md-2"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    EMAIL ADDRESS:
                                    <input id="fillMeIn7" type="email" class="form-control vertical-gap" placeholder="Email address" >
                                </div>
                                <div class="col-md-2"></div>
                            </div>

                            <div class="row vertical-gap">
                                <div class="col-md-2"></div>
                                <div class="col-md-8">
                                    DISCIPLINE:
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2"></div>
                            </div>

                            <div class="row">
                                <div class="col-md-2"></div>
                                <div class="col-md-10">
                                    <!--<button type="button" input type="hidden" class="btn btn-success" name="redirect" value="thanks.html">SUBMIT</button>-->
                                    <input type="submit" value="SUBMIT" class="btn btn-success btn-lg">
                                </div>
                                <div class="col-md-2"></div>
                            </div>
                        </form>'

谢谢！

Answer 1

你可以在一个数组中拥有id，迭代它的值，并在一个将所有逻辑分组的函数中执行可重复的代码。

示例：

["fillMeIn1", "fillMeIn2", "fillMeIn3", "fillMeIn4"].each(function(id){
    // do things with id
})

Answer 2

为什么不使用html＆＃34; required＆＃34;财产而不是？

如果你想用JS做这个，你应该给每个变量一个不同的名字。在您发布的代码中，您不断覆盖相同的变量，然后，它评估val（最终被分配给（填充me7值）到＆＃34;＆＃34;，如果为true，则设置所有边界变红了。

设置不同的变量，在触发提交时将输入值推送到数组中，如果变量[i] == 0，则设置getElementId（switch case [i]或其他具有输入名称的数组[i] ]）。bordercolor to red。

再次，这听起来非常不充分，我不确定它会起作用。我的猜测是需要花费很多时间，并且可能会超时（除非你使用了一些asych / try-catch类型的JS）。

我只想找到一个HTML必需的属性，然后覆盖＆＃34; required＆＃34; CSS中的属性使其看起来像你想要的那样。更简单，更容易和干净。

Answer 3

代码中的主要问题是每次编写val时都会覆盖变量var val = ...。

保持自己的逻辑，你可以写出类似的东西。

var formModule = (function () {
    var $fields = [
        document.getElementById('fillMeIn'),
        document.getElementById('fillMeIn2'),
        document.getElementById('fillMeIn3'),
        document.getElementById('fillMeIn4'),
        document.getElementById('fillMeIn5'),
        document.getElementById('fillMeIn6'),
        document.getElementById('fillMeIn7')
    ];

    function markInvalid($field) {
        $field.style.borderColor = 'red';
    }

    function markValid($field) {
        $field.style.borderColor = 'green';
    }

    return {
        check: function () {
            var isValid = true;
            $fields.forEach(function ($f) {
                if ($f.value === '') {
                    if (isValid) alert('Please fill in the missing fields');
                    isValid = false;
                    markInvalid($f);
                }
                else markValid($f);
            });
            return isValid;
        }
    };
})();

此示例中有一些额外的概念可能很有用：

使用DOM非常慢，这就是你应该这样做的原因将您的元素一次性放入变量中，而不是每次都放入变量中点击提交按钮。
在我的示例中，我使用var formModule = (function () {...})();包装代码。它被称为module pattern。目标是防止变量在应用程序的其余部分泄漏。

更好的解决方案可能是使用html表单验证的“强大”：

<强> HTML：

 <form id="mbrForm" action="thanks.html" method="post">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 vertical-gap">
            FIRST NAME:
            <input id="fillMeIn" type="text" required class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-4 vertical-gap">
            LAST NAME:
            <input id="fillMeIn2" type="text" required class="form-control" placeholder="Last Name">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8 vertical-gap">
            ADDRESS:
            <input id="fillMeIn3" type="text" required class="form-control vertical-gap" placeholder="First Line">
            <input id="fillMeIn4" type="text" required class="form-control vertical-gap" placeholder="Second Line">
            <input id="fillMeIn5" type="text" required class="form-control vertical-gap" placeholder="Town/City">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-4 vertical-gap">
            POST CODE:
            <input id="fillMeIn6" type="text" required class="form-control vertical-gap" placeholder="Postcode">
        </div>
        <div class="col-md-4 vertical-gap">
            PHONE No:
            <input type="number" class="form-control vertical-gap" placeholder="Tel no">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            EMAIL ADDRESS:
            <input id="fillMeIn7" type="email" required class="form-control vertical-gap" placeholder="Email address">
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row vertical-gap">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            DISCIPLINE:
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Cross Country"> CROSS COUNTRY
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Enduro"> ENDURO
                </label>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input class="form-check-input horizontal-gap" type="checkbox" value="Downhill"> DOWNHILL
                </label>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            <input id="btnSubmit" type="submit" value="SUBMIT" class="btn btn-success btn-lg">
        </div>
        <div class="col-md-2"></div>
    </div>
</form>

<强> JS：

var formModule = (function () {
    var $form = document.getElementById('mbrForm');
    var $btn = document.getElementById('btnSubmit');
    var $fields = [
        document.getElementById('fillMeIn'),
        document.getElementById('fillMeIn2'),
        document.getElementById('fillMeIn3'),
        document.getElementById('fillMeIn4'),
        document.getElementById('fillMeIn5'),
        document.getElementById('fillMeIn6'),
        document.getElementById('fillMeIn7')
    ];

    checkValidation();

    $form.addEventListener('change', checkValidation);
    $form.addEventListener('keyup', checkValidation);
    $fields.forEach(function ($f) {
        $f.addEventListener('change', function () {
            markInput($f, $f.checkValidity());
        });
    });

    function checkValidation() {
        $btn.disabled = !$form.checkValidity();
    }

    function markInput($field, isValid) {
        $field.style.borderColor = isValid ? 'green' : 'red';
    }
})();

在此示例中，按钮被禁用，直到表单有效，并且无论何时更改输入都会验证输入。

我在HTML输入中添加了required属性，因此它们可以由原生javascript函数checkValidity()处理。请注意，在这种情况下，还会正确检查输入电子邮件和号码。您还可以使用属性pattern来获得更强大的验证：

<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">

希望它有所帮助。

使用多个突出显示的字段进

3 个答案: