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

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                    
                
        

我有一个简单的表格：

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

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

我应该怎么做？

最佳答案

的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，则绑定“提交”按钮单击事件并满足您的要求：

按钮点击事件：

$( "#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。

希望这对您有帮助。使用最适合您需求的活动。

关于javascript - 在Jquery/Javascript上验证提交和重定向表单的最佳实践，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33012979/