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函数....想要在body脚本中编写函数，比如名字检查我可以写isAlphabet（'firstname'，'请输入有效名字'，'名字'）所以无论我需要什么，我都可以添加。我可以将表单作为对象引用并检查表单元素

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

如果您使用的是jQuery，请考虑它的优秀validation plugin 我强烈推荐它。

根据需要进行表单验证

2 个答案: