[英]How to implement single validate method for multiple input fields?
我正在一个表单元素中实现多个输入字段,因此表单内部可能是一个输入字段和多个输入字段。 所以我想实现一种验证方法。 对于一个电话号码,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 处理验证? 如果有人有任何想法,请分享,提前谢谢。
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 和输入来修改案例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.