如何為多個輸入字段實現單一驗證方法？

Question

我正在一個表單元素中實現多個輸入字段，因此表單內部可能是一個輸入字段和多個輸入字段。 所以我想實現一種驗證方法。 對於一個電話號碼，email，年齡，日期等。所以將來可能形成有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/

是否可以通過一個 function 處理驗證？ 如果有人有任何想法，請分享，提前謝謝。

Answer 1

The term "validation" is a bit vague, You could use the basic html form validation api [ https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation ] and set the necessary validations in html 通過傳遞屬性

另一種方法是創建一個嵌套的 handleInput function 如下所示，並使用 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 和輸入來修改案例