HTML表單上的多個驗證規則

Question

我有一個類似於以下代碼的html表單。 我的問題是我想基於多個條件進行驗證...一個數字可以為0或必須大於700。我正在使用一個數組作為輸入名稱，這使我很難獲得javascript解決方案工作。 在這種情況下，如何使用多重Critera進行驗證？

<form name="endingweights" method="post">
<input type="hidden" value="1" name="strain[]"></td><td><input type="number" step="any" name="ending[]" min="0" max="1500" required />
<input type="hidden" value="2" name="strain[]"></td><td><input type="number" step="any" name="ending[]" min="0" max="1500" required />
<input type="hidden" value="3" name="strain[]"></td><td><input type="number" step="any" name="ending[]" min="0" max="1500" required />

Answer 1

使用以下javascript函數進行了驗證。

<script>
function validateForm() {
var x = document.forms["endingweights"].elements["ending[]"];
for (var i = 0; i < x.length; i++) {
var aControl = x[i].value;
if (aControl>0 && aControl<700) {
    alert("Incorrect Weight, must be 0 or greater than 700.");
    x[i].focus();
    return false;
    }
}}
</script>

Answer 2

如果您將id分配給您的輸入，則可以更輕松地通過JavaScript進行驗證。 這樣，您可以在提交表單時檢查輸入的值。

HTML：

<form name="endingweights" method="post">

    <!-- hidden inputs -->
    <input id="foo" type="number" min="0" max="1500" required>
    <input id="bar" type="number" min="0" max="1500" required>
    <input id="baz" type="number" min="0" max="1500" required>
    <input type="submit" value="Submit">
</form>

JS：

var form = document.forms['endingweights'],
    foo  = document.getElementById('foo'),
    bar  = document.getElementById('bar'),
    baz  = document.getElementById('baz');

// validate inputs and form
form.addEventListener('submit', function(ev) {

    // stop this from auto submitting
    ev.preventDefault();
    ev.stopPropagation();        

    // make sure constraints are followed
    if ((foo.value !== 0 && foo.value <= 700) ||
        (bar.value !== 0 && bar.value <= 700) ||
        (baz.value !== 0 && baz.value <= 700))
    {
        alert("All input values must be either 0 or greater than 700");
        return false;
    }

    // perform other validations if necessary

    // submit form
    form.submit();

}, false);

一個演示jsfiddle ！

name屬性在處理提交的數據時在服務器端最有用，但是id在處理客戶端驗證時效果最佳。