如何使用javascript驗證輸入

Question

<script type="text/javascript">
function validate() {
    if (document.form.price.value.trim() === "") {
        alert("Please enter a price");
        document.form.price.focus();
        return false;
    }
    if (document.form.price.value !== "") {
        if (! (/^\d*(?:\.\d{0,2})?$/.test(document.form.price.value))) {
            alert("Please enter a valid price");
            document.form.price.focus();
            return false;
        }
    }
    return true;
}
</script>

<form action="" method="post" name="form" id="form" onsubmit="return validate(this);">

<input name="price"  type="text" class="r2" />
<input name="price2" type="text" class="r2" />
<input name="price3" type="text" class="r2" />
<input name="price4" type="text" class="r2" />
<input name="price5" type="text" class="r2" />
...more....
<input name="price50" type="text" class="r2" />

這個JavaScript代碼工作正常，以驗證字段“價格”。

題 ：

如何使代碼作為全局驗證工作？ 示例：將使用單個函數驗證價格，price2，price3，price4，price5等。 請告訴我 ：）

Answer 1

我的個人推薦是這樣的：

<script type="text/javascript">
function validate() {
    return [
        document.form.price,
        document.form.price2,
        document.form.price3,
        document.form.price4,
        document.form.price5
    ].every(validatePrice)
}

function validatePrice(price)
{
    if (price.value.trim() === "") {
        alert("Please enter a price");
        price.focus();
        return false;
    }
    if (price.value !== "") {
        if (! (/^\d*(?:\.\d{0,2})?$/.test(price.value))) {
            alert("Please enter a valid price");
            price.focus();
            return false;
        }
    }
    return true;       
}
</script>

Answer 2

如果你不打算使用jQuery，這應該可行。

function validate() {
    for (var field in document.getElementsByTagName('input')) {
        if (isPriceField(field)) {
            field.value = field.value.trim();
            if (isNaN(parseFloat(field.value))) {
                return alertAndFocus(field, "Please enter a valid price");
            }
        }               
    }

    return true;
}

function isPriceField(field) {
    return (field.name.substr(0, Math.min(5, field.name.length)) === 'price')
}

function alertAndFocus(field, message) {
    alert(message);
    field.focus();
    return false;
}

Answer 3

$('#form input').each(function(){

   console.log('valid',$(this)[0].validity.valid);

});

Answer 4

在這種情況下最簡單的是使用jQuery。 這樣，您可以使用通用選擇器並對所有項目應用驗證。

$("#price*").each(function() {//Do your validation here $(this) is the item price, then price2 then price3})

對於其他任何你需要查詢DOM的東西，然后在所有瀏覽器中都不起作用。

今天，你無法在Javascript中做任何事情而忽略jQuery http://docs.jquery.com/或Scriptalicious之類的東西。

Answer 5

我使用jsFormValidator來驗證我的表單，它就像一個魅力。 您不需要為HTML標記添加繁重的語法，例如：

 <input type="text" name="username" placeholder="Username" data-validate/>

您只需創建一個基本的JSON對象來描述您要如何驗證表單：

{
"email": {
    "validEmail":true,
    "required":true
},

"username": {
    "minLength":5,
    "maxLength":15
},

"password": {
    "validPassword":true,
    "match": "password",
    "required":true
}

}

然后，您只需使用單行代碼驗證整個表單：

  jsFormValidator.App.create().Validator.applyRules('Login'); //Magic!

Answer 6

您可以驗證所有5個價格，並且僅當所有5個符合您的驗證規則時才返回true。

Answer 7

jQuery Form Validator是一個功能豐富的多語言jQuery插件，可以輕松驗證用戶輸入，同時保持HTML標記從javascript代碼中清除。

盡管這個插件具有廣泛的驗證功能，但它的設計要求盡可能少的jQuery網絡流量。 這是通過將“模塊”中的驗證功能組合在一起來實現的，從而可以僅加載驗證特定表單所需的那些功能。

    <form action="/registration" method="POST">
      <p>
        User name (4 characters minimum, only alphanumeric characters):
        <input data-validation="length alphanumeric" data-validation-length="min4">
      </p>
      <p>
        Year (yyyy-mm-dd):
        <input data-validation="date" data-validation-format="yyyy-mm-dd">
      </p>
      <p>
        Website:
        <input data-validation="url">
      </p>
      <p>
        <input type="submit">
      </p>
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
    <script>
      $.validate({
        lang: 'es'
      });
    </script>