javascript - 使用 Jquery/Javascript 验证提交和重定向表单的最佳实践

Question

我有一个简单的表格:

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit">Submit</button>            
  </form>

我想要做的是验证输入字段，如果一切正常，则将用户发送到一个新页面，该页面使用输入值作为网址的一部分，而不是查询字符串值，例如“/search/London” 。如果验证失败，我想处理有关哪个字段不正确的信息。

我应该怎么做？

Answer 1

HTML

<form id="search-form" method="get" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit" id="search">Submit</button>            
  </form>

如果您使用jQuery，则绑定(bind)提交按钮单击事件并处理您的要求:

按钮点击事件:

$( "#search" ).click(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $('#search-form').attr('action', 'search/' + inputVal);
    $("#search-form").submit();
  } else {
     // Show error message to user
  }
});

或者

表单提交事件

$( "#search-form" ).submit(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $(this).attr('action', 'search/' + inputVal);
    $(this).submit();
  } else {
     // Show error message to user
  }
});

注意:定义 vaildateUserInput() 函数，该函数将在验证后返回 true|false。

希望这对您有帮助。使用最适合您要求的事件。