如何使用 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

如果这是您的 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 2

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

That's a shorthand for $(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>

工作fiddle ==> http://jsfiddle.net/y4a7rp2e/

Answer 3

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

对于.click :

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

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

提交. 在 <form></form> 个标签

之间附上您的表格

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

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

How to do validation on form submit using jQuery

javascript

validation

jquery

jquery-ui

jquery-plugins