Как реализовать один метод проверки для нескольких полей ввода?

Question

Я реализую несколько полей ввода в элементе формы, поэтому внутри формы может быть одно поле ввода и несколько полей ввода. Поэтому я хочу реализовать один метод для проверки. Для номера телефона, электронной почты, возраста, даты и т. Д. Поэтому в будущем может быть сформировано 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>

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

Можно ли обрабатывать проверку с помощью одной функции? Если у кого-нибудь есть идеи, поделитесь, заранее спасибо.

Answer 1

Термин «валидация» является немного расплывчатым. Вы можете использовать базовую HTML-форму для проверки api [https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation] и установить необходимые валидации в html, передав атрибуты

Другим способом будетсоздать вложенную функцию handleInput, как показано ниже, и использовать для проверки регистр переключателя.

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

Вместо этого вы могли бы просто использовать переключатель (e.target.id) и применить логику с этим внутри корпуса переключателя. если вы предпочитаете, но вы должны изменять регистры с каждым новым идентификатором и вводить