如何为多个输入字段实现单一验证方法？答案

【问题标题】：How to implement single validate method for multiple input fields?如何为多个输入字段实现单一验证方法？
【发布时间】：2019-10-06 07:56:37
【问题描述】：

我在一个表单元素中实现了多个输入字段，所以表单内部可能是一个输入字段和多个输入字段。所以我想实现一种验证方法。对于电话号码、电子邮件、年龄、日期等。所以将来可能会形成15个输入字段。所以在这种情况下，方法应该处理所有输入字段。

下面是示例代码：

<form onsubmit="return false">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
     <div>
        <label for="">Middle Name</label>
        <input type="text" name="mname" id="mname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</form>
<script>
    var data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data); //return object
    }
</script>

演示 https://jsfiddle.net/varunPes/2fdoxanu/5/

是否可以通过一个函数来处理验证？如果有人有任何想法，请分享，提前谢谢。

【问题讨论】：

标签： javascript jquery html forms jquery-form-validator

【解决方案1】：

“验证”这个词有点模糊，您可以使用基本的 html 表单验证 api [https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation] 并通过传递属性在 html 中设置必要的验证

另一种方法是创建一个嵌套的 handleInput 函数，如下所示，并使用 switch case 进行验证。

<form onsubmit="return false">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput('text')(this)>
    </div>
     <div>
        <label for="">Middle Name</label>
        <input type="text" name="mname" id="mname" onkeyup=handleInput('text')(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput('number')(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput('email')(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput('phone')(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</form>
<script>
    var data={ };
    const handleInput = (type) => (e) => { //using arrow functions and function expression for easier readability
        switch(type){
           case "text" : //do logic here
               break;
           case "number" : //logic here
               break;
           case "email" : ///..etc
               break;
         }
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data); //return object
    }
</script>

如果您愿意，您也可以只使用 switch(e.target.id) 并在 switch 案例中应用逻辑，但您应该使用每个新的 id 和输入来修改案例

【讨论】：