的步骤如下:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<form id="myForm">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" class="required">
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" class="required">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" class="required">
</div>
<button type="submit">提交</button>
</form>
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var isValid = true; // 标记表单是否通过验证
$('.required').each(function() {
if ($(this).val() === '') {
$(this).addClass('error');
isValid = false;
} else {
$(this).removeClass('error');
}
});
if (isValid) {
// 表单通过验证,可以进行提交操作
// 可以在这里调用后端接口或执行其他操作
console.log('表单验证通过');
}
});
});
.error {
border: 1px solid red;
}
以上代码实现了使用jQuery验证表单域并删除错误的功能。在表单提交时,会遍历所有带有"required"类的表单域,如果某个表单域的值为空,则给该表单域添加"error"类,同时将isValid标记为false。如果所有表单域都不为空,则isValid为true,表示表单通过验证,可以进行提交操作。
领取专属 10元无门槛券
手把手带您无忧上云