如何驗證輸入使用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

您可以驗證所有5個價格，並且只有在所有5個符合您的驗證規則的情況下才返回true。

Answer 3

在這種情況下，最簡單的是真正使用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 4

如果你不打算使用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 5

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

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

}); 

Answer 6

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

jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code. Even though this plugin has a wide range of validation functions it's designed to require as little jQuery network traffic as possible. This is achieved by grouping together validation functions in "modules", making it possible to load only those functions that's needed to validate a particular form 

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