如何使用jQuery正确验证表单

How to correctly validate form with jQuery?

本文关键字：验证 表单 何使用 jQuery      更新时间：2023-09-26

所以我的表单有这个jQuery：

frm.submit(function(event) {
  validateForm();
  if(validateForm()) {
    $(this).submit();
    } else {
    event.preventDefault();
  }
});

它确实有点工作，但我得到了JS <error>（它在控制台中没有说明任何其他内容），我认为原因是该函数必须再次进行验证？有点像循环依赖。

你能告诉我一个更好的方法来完成我在这里想要实现的目标吗？

  1. 如果填写错误，则验证并显示错误
  2. 如果一切正常，请提交表格

可能是这样的吗？

HTML-

<input type="text" id="name" />
<input type="tel" id="phone" />
<button type="button" id="submit">Submit</button>
<div id="errors"></div>

JS-

const user = {}
$('#submit').click(function(){
    // validating form
    if(!$('#name').val()) {
        $('#errors').text('invalid value in "name" field')
        return;
    }    
    if(!$('#phone').val()) {
        $('#errors').text('invalid value in "phone" field')
        return;
    }
    $('#errors').text('');
    user.phone = $('#phone').val();
    user.name = $('#name').val();
    // form submission goes here 
});

逻辑-

一旦函数返回，就会阻止在return表达式本身之后执行任何其他内容。

如果您没有return任何内容，解释器将继续到下一个表达式。

这使您可以选择在返回并停止函数继续运行之前操作元素并处理错误。

function validateForm(){
 if (input.val().isok && select.val().ispresent){
   form.submit();
 }else{
  show_errors();
 }
}

为什么不这样呢？

相关文章：