HTML 中如何实现判断 required 为 false 时不执行 input 中添加的方法
可以通过 JavaScript 来实现,具体方法如下:
-
给 input 元素添加一个属性,例如 'data-required',用来表示是否必填,如果为 'false' 则表示非必填。
-
给 input 元素添加一个事件监听,例如 'onsubmit',用来在表单提交时进行验证。
-
在事件处理函数中,通过 input 元素的 'data-required' 属性来判断是否需要验证。
-
如果 'data-required' 为 'true',则执行验证方法;否则,不执行验证方法。
以下是示例代码:
HTML 代码:
<form onsubmit='return validateForm()'>
<label for='name'>Name:</label>
<input type='text' id='name' name='name' data-required='true' onblur='validateInput(this)'>
<button type='submit'>Submit</button>
</form>
JavaScript 代码:
function validateForm() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.getAttribute('data-required') === 'true') {
if (!validateInput(input)) {
return false;
}
}
}
return true;
}
function validateInput(input) {
var value = input.value.trim();
if (value === '') {
alert('This field is required.');
return false;
}
return true;
}
在上面的示例中,validateForm 函数用来验证整个表单,validateInput 函数用来验证单个 input 元素。在 validateForm 函数中,通过遍历所有 input 元素,判断是否需要验证;在 validateInput 函数中,通过判断输入框的值是否为空来进行验证。如果 input 元素的 'data-required' 属性为 'false',则不会执行 validateInput 函数。
原文地址: https://www.cveoy.top/t/topic/nvbv 著作权归作者所有。请勿转载和采集!