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

Question

我有三个文本框，我在键盘上用-替换% 。 但是我想在提交时执行此操作。 我不想向用户显示替换项，但是在提交时应该替换它。 对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">

Answer 1

1. 您可以汇总另一种形式或使用隐藏字段。
2. 您不需要将每个单独的代码块都包装在$(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/

Answer 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/

Answer 3

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

对于.click：

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

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

for .submit：将您的表单放在 <form></form>标记之间

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