表單驗證根據需要

Question

<script type='text/javascript'> 

    function perCheckf(elem){ 
     elem = document.getElementById(elem); 
     if(elem.value.length == 0){ 
      emptymsg('Percentage',elem) 
      elem.focus(); 
      return false; 
     } 
     var uInput = elem.value; 
     if(uInput >= 0 && uInput <= 100 && uInput!=''){ 
      return true; 
     }else{ 
      alertmsg("Please enter between 0 and 100") 
      elem.focus(); 
      return false; 
     } 
    } 
    function notEmpty(elem, helperMsg){ 
     if(elem.value.length == 0){ 
      alert(helperMsg); 
      elem.focus(); // set the focus to this input 
      return false; 
     } 
     return true; 
    } 

    function isNumeric(elem, helperMsg){elem = document.getElementById(elem); 

     if(elem.value.length == 0){ 
      emptymsg('field',elem) 
      elem.focus(); 
      return false; 
     } 
     var numericExpression = /^[0-9]+$/; 

     if(elem.value.match(numericExpression)){ 
      return true; 
     }else{ 
      alertmsg(helperMsg) 
      elem.focus(); 
      return false; 
     } 
    }function emptymsg(emty){ 
      document.getElementById('error').innerHTML="Empty "+emty+": Please Enter value"; 
      document.getElementById('error').style.display="block"; 
    }function alertmsg(helperMsg){ 
      document.getElementById('error').innerHTML=helperMsg; 
      document.getElementById('error').style.display="block"; 
    } 
    function isAlphabet(elem, helperMsg, emty){ 
     var name = document.getElementById(elem); 
     if(name.value.length == 0){ 
      emptymsg(emty,name);   
      name.focus(); // set the focus to this input 
      return false; 
     } 
     var alphaExp = /^[a-zA-Z]+$/; 
     if(name.value.match(alphaExp)){ 
      return true; 
     }else{ 
      alertmsg(helperMsg) 
      name.focus(); 
      return false; 
     } 
    } 

    function isAlphanumeric(elem, helperMsg){ 
     var alphaExp = /^[0-9a-zA-Z]+$/; 
     elem = document.getElementById(elem); 
     if(elem.value.length == 0){ 
      emptymsg('field',elem) 
     } 
     if(elem.value.match(alphaExp)){ 
      return true; 
     }else{ 
      alertmsg(helperMsg) 
      elem.focus(); 
      return false; 
     } 
    } 

    function lengthRestriction(elem, min, max){ 
     var uInput = elem.value; 
     if(uInput.length >= min && uInput.length <= max){ 
      return true; 
     }else{ 
      alert("Please enter between " +min+ " and " +max+ " characters"); 
      elem.focus(); 
      return false; 
     } 
    } 

    function madeSelection(elem, helperMsg){ 
     elem = document.getElementById(elem); 
     if(elem.value == "Please Choose"){ 
      alertmsg(helperMsg); 
      elem.focus(); 
      return false; 
     }else{ 
      return true; 
     } 
    } 

    function emailValidator(elem, helperMsg){ 
     var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 
     elem = document.getElementById(elem); 
     if(elem.value.length == 0){ 
      emptymsg('Email',elem) 
      elem.focus(); 
      return false; 
     } 
     if(elem.value.match(emailExp)){ 
      return true; 
     }else{ 
      alertmsg(helperMsg); 
      elem.focus(); 
      return false; 
     } 
    } 
    var formular = [ 
    { func: isAlphabet, params: [ 'firstname', 'Please..' ] }, 
    { func: perCheckf, params: [ 'per' ] } 
    ]; 
function checkForm() { 
alert('checkform'); 
    var validation; 
    for(var i = 0; i < formular.length; i++) 
    validation = formular[i].func(formular[i].params); 
    return validation; 
    } 
    </script> 
    <form [...] onsubmit="return checkForm();"> 
<div id="error" style="display: none;"></div> 
First Name: <input type='text' id='firstname' /><br /> 
Percentage: <input type='text' id='per' /><br /> 
<!-- Address: <input type='text' id='addr' /><br /> 

Username(6-8 characters): <input type='text' id='username' /><br />--> 
Email: <input type='text' id='email' /><br /> 
Zip Code: <input type='text' id='zip' /><br /> 
State: <select id='state'> 
    <option>Please Choose</option> 
    <option>AL</option> 
    <option>CA</option> 
</select><br /> 
<input type='submit' value='Check Form' /> 
</form> 

這是我寫的代碼...我想要寫在窗體內的onsubmit函數....想寫身體腳本函數像名稱檢查我可以寫isAlphabet（' firstname'，'請輸入有效的名字'，'名字'），所以無論我需要我可以添加。如果您使用的是jQuery，請考慮其優秀的validation plugin，我可以將表單作爲對象並檢查表單元素

Answer 1

把你的驗證在這樣的一個對象：

var formular = [ 
    { func: isAlphabet, params: [ 'firstname', 'Please..' ] }, 
    { func: perCheckf, params: [ 'per' ] } 
    ]; 

創建的onsubmit功能：

function checkForm() { 
    var validation; 
    for(var i = 0; i < formular.length; i++) 
    validation = formular[i].func(formular[i].params); 
    return validation; 
    } 

一個在你的HTML這樣的：

<form [...] onsubmit="return checkForm();"> 

Answer 2

。
我強烈推薦它。