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

Posted 2023-05-09

【中文标题】如何使用 jQuery 对表单提交进行验证

【英文标题】：How to do validation on form submit using 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 并发送无效输入。

【参考方案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
);