如何使用 jQuery 对表单提交进行验证答案

【问题标题】：How to do validation on form submit using jQuery如何使用 jQuery 对表单提交进行验证
【发布时间】：2018-11-16 04:27:57
【问题描述】：

我有三个文本框，我在 keyup 上用 - 替换 %。但我想在提交时执行此操作。我不想向用户显示替换，但在提交时它应该被替换。对jquery了解不多。

$(function() {
    $('#name').keyup(function() {
            $(this).val($(this).val().replace(/[%]/g, "-"));
      });
});

$(function() {
    $('#userName').keyup(function() {
          $(this).val($(this).val().replace(/[%]/g, ""-""));
    });
});

$(function() {
    $('#productCode').keyup(function() {
        $(this).val($(this).val().replace(/[%]/g, ""-""));
    });
});

 First name: <input type="text" name="name" ><br>
  First name: <input type="text" name="userName" ><br>
   First name: <input type="text" name="productCode" ><br>

    <input type="submit" value="Submit">

【问题讨论】：

如果这是一个验证输入的问题，它真的应该在服务器端完成。无法保证用户不会更改/禁用您的 JS 并发送无效输入。

标签： javascript jquery validation jquery-ui jquery-plugins

【解决方案1】：

您可以汇总其他表单或使用隐藏字段。
您无需将每个单独的代码块包装在 $(function(){}); 中。

这是 $(document).ready(function(){}); 的简写；

var doReplace = function(string){
        return string.replace(/%/g, "-");
}

var $nameX = $('#nameX');
var $userX = $('#userNameX');
var $prodX = $('#productCodeX');

$('#name').keyup(function() {
  $nameX.val(doReplace($(this).val()));
});

$('#userName').keyup(function() {
  $userX.val(doReplace($(this).val()));
});

$('#productCode').keyup(function() {
  $prodX.val(doReplace($(this).val()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" id="name" />
  <input type="hidden" id="nameX" name="name" /><br />
  <input type="text" id="userName" />
  <input type="hidden" id="userNameX" name="userName" /><br />
  <input type="text" id="productCode" />
  <input type="hidden" id="productCodeX" name="productCode" /><br />
  <input type="submit">
</form>

或提交表格

var doReplace = function(string){
  return string.replace(/%/g, "-");
}

var $nameX = $('#nameX');
var $userX = $('#userNameX');
var $prodX = $('#productCodeX');

$("#myForm").on("submit", function(e) {
  $nameX.val(doReplace($('#name').val()));
  $userX.val(doReplace($('#userName').val()));
  $prodX.val(doReplace($('#productCode').val()));

  console.log($nameX.val());
  console.log($userX.val());
  console.log($prodX.val());
  
  // Remove this in production. Here it's just so we can see the console log.
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="text" id="name" />
  <input type="hidden" id="nameX" name="name" /><br />
  <input type="text" id="userName" />
  <input type="hidden" id="userNameX" name="userName" /><br />
  <input type="text" id="productCode" />
  <input type="hidden" id="productCodeX" name="productCode" /><br />
  <input type="submit">
</form>

工作小提琴 ==> http://jsfiddle.net/y4a7rp2e/

【讨论】：

name属性需要重新添加，“x”字段需要为type="hidden"。
完全正确。立即修复
我建议 name 属性应该在隐藏输入中没有额外的“X”，以避免更改服务器端代码以接受正确的字段。也许应该完全删除可见输入的 name 属性，因为我们没有在服务器端使用这些值。
很好的提示。这样做。
@FrankCadillac 啊，公平。喜欢技术出奇的好。

【解决方案2】：

如果这是您的 HTML 代码：

 First Name: <input type="text" name="name" ><br>
 User Name: <input type="text" name="userName" ><br>
 Product Code: <input type="text" name="productCode" ><br>
 <input type="submit" value="Submit" id="submit>

为了执行替换，请为提交按钮分配一个 id，使用该 id 并替换

$(function() {
    $('#submit').submit(function() {
            $('#name').val($(this).val().replace(/[%]/g, "-"));
            $('#userName').val($(this).val().replace(/[%]/g, ""-""));
            $('#productCode').val($(this).val().replace(/[%]/g, ""-""));
      });
    })

因此，当单击提交按钮时，所有 3 个字段都将执行指定的操作。操作也可以改变

有关 jQuery 中的 .submit() 的更多信息，请参阅官方文档：https://api.jquery.com/submit/

【讨论】：

不会使更改对用户不可见。
另外，它不是 JQuery。它是 jQuery。

【解决方案3】：

首先，命名您用于验证 html 的 3 个函数。您可以使用.submit 或.click 函数。

对于.click：

<input id="submitBtn" type="submit" value="Submit">

$("#submitBtn").click(function(){
    //call the 3 functions by name
});

对于.submit： 用<form></form> 标签括起来你的表单

$("yourformName").submit(function(){
    //call the 3 functions by name
});

【讨论】：