1

I am implementing multiple input fields in a form element, So inside form may be one input field and more than one input field. So I want to implement one method for validation. For a phone number, email, age, date, etc. So in future may be formed has 15 input fields. So in that case on method should handle all input fields.

Below is the sample code:

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

DEMO https://jsfiddle.net/varunPes/2fdoxanu/5/

Is it possible to handle validation through one function? If anyone has any idea, Please share, Thank you in advance.

4

1 回答 1

0

“验证”一词有点模糊，您可以使用基本的 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 和输入来修改案例

于 2019-10-06T08:19:18.330 回答