jquery 表单进行客户端验证demo

2023年6月10日下午7:21 • JavaScript

以下是详细的攻略：

jQuery 表单进行客户端验证

在使用表单提交数据之前，通常需要对表单进行客户端验证，以避免无效的数据被提交到后台服务器。jQuery 是一种非常流行的 JavaScript 库，可以方便地实现表单验证功能。

接下来我们将向您展示如何使用 jQuery 对表单进行客户端验证。以下是大致的步骤：

引入 jQuery JS 库。在 HTML 文件中，需要在 <head> 标签内部或者 </body> 之前添加以下代码：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

编写 HTML 表单代码，例如：

<form id="myform" method="post" action="submit.php">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="text" id="email" name="email" />

  <button type="submit">Submit</button>
</form>

编写 jQuery 代码来验证表单。以下是一个例子，可以验证表单中的姓名是否为空，电子邮件地址是否合法：

$(document).ready(function() {
  $('#myform').submit(function() {

    // 获取表单的值
    var name = $('#name').val();
    var email = $('#email').val();

    // 验证姓名是否为空
    if (name.length == 0) {
      alert('Please enter your name.');
      return false;
    }

    // 验证电子邮件是否合法
    var reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (!reg.test(email)) {
      alert('Please enter a valid email address.');
      return false;
    }

  });
});

以上代码中，$(document).ready() 函数是 jQuery 中用于在文档加载完成后才执行的函数，$('#myform').submit() 函数用于在表单提交时执行。通过 $('#name').val() 和 $('#email').val() 获取表单的值，然后使用 if 语句对表单值进行验证并在需要的情况下给出警告信息。如果验证不通过，则返回 false，以停止表单提交。

以上就是 jQuery 表单客户端验证的基本攻略。下面再举两个具体的例子：

示例 1：验证电话号码

假设我们的表单需要用户输入电话号码，我们需要验证电话号码是否正确。我们可以使用正则表达式来实现：

$(document).ready(function() {
  $('#myform').submit(function() {

    // 获取电话号码
    var phone = $('#phone').val();

    // 验证电话号码是否为数字
    if (!$.isNumeric(phone)) {
      alert('The phone number should be a number.');
      return false;
    }

    // 验证电话号码是否合法
    var reg = /^1[3|4|5|7|8]\d{9}$/;
    if (!reg.test(phone)) {
      alert('Please enter a valid phone number.');
      return false;
    }
  });
});

以上代码通过 $.isNumeric() 函数来判断电话号码是否为数字，然后使用正则表达式 /^1[3|4|5|7|8]\d{9}$/ 验证电话号码是否合法。如果电话号码不是数字或者不合法，则给出相应的警告。

示例 2：验证密码和密码确认

有时候我们需要用户输入密码和密码确认信息，以确保用户输入的密码正确。以下是一个例子，可以验证密码和确认密码是否一致：

$(document).ready(function() {
  $('#myform').submit(function() {

    // 获取密码和确认密码
    var password = $('#password').val();
    var password_confirm = $('#password_confirm').val();

    // 验证密码是否为空
    if (password.length == 0) {
      alert('Please enter your password.');
      return false;
    }

    // 验证密码和确认密码是否一致
    if (password != password_confirm) {
      alert('The passwords do not match.');
      return false;
    }

  });
});

以上代码通过比较两个密码值来验证密码和确认密码是否一致。如果不一致，则给出警告信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery 表单进行客户端验证demo - Python技术站