基于Jquery实现表单验证

2023年6月10日下午6:56 • JavaScript

下面是“基于Jquery实现表单验证”的完整攻略：

一、引入JQuery

我们需要先在HTML页面中引入JQuery，代码如下所示：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

二、实现基础表单验证

1. 单个表单项验证

首先，我们需要给需要验证的表单项设置一个唯一的id属性，如下所示：

<input type="text" id="username" name="username" placeholder="请输入用户名">

接下来，我们实现对该表单项进行非空验证的代码：

$(function(){
  $("#submit").on('click',function(){
    var username = $("#username").val();
    if(username==""){
      alert("请输入用户名");
      return false;
    }
  });
});

在上述代码中，我们通过使用JQuery选择器获取到了id为username的表单项，并通过该表单项的val()方法获取了该表单项的值。再通过if语句对该表单项进行非空验证，如果验证失败，则弹出提示框，并返回false阻止表单的提交。

2. 多个表单项验证

多个表单项的验证，可以通过在上一步的基础上，对需要验证的所有表单项依次进行验证，代码如下所示：

$(function(){
  $("#submit").on('click',function(){
    var username = $("#username").val();
    var password = $("#password").val();
    if(username==""){
      alert("请输入用户名");
      return false;
    }
    if(password==""){
      alert("请输入密码");
      return false;
    }
  });
});

在上述代码中，我们新增了一行代码对密码进行非空验证。

3. 正则表达式验证

除了非空验证，我们还可以通过正则表达式对表单项中的数据进行格式验证。例如，在对一个表单项进行Email验证时，首先需要获取该表单项的值，然后通过一个正则表达式判断该值是否符合Email地址格式。代码如下所示：

$(function(){
  $("#submit").on('click',function(){
    var email = $("#email").val();
    var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if(email==""){
      alert("请输入邮箱地址");
      return false;
    }
    if(!re.test(email)){
      alert("请输入正确的邮箱地址");
      return false;
    }
  });
});

在上述代码中，我们使用了一个正则表达式来判断当前输入的邮箱地址是否符合Email地址的格式。如果格式不正确，则弹出提示框，阻止表单的提交。

三、完整示例

下面是一个完整的示例，该示例实现了对用户名、密码和邮箱的基本验证：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单验证示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
      </div>
      <div>
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱地址">
      </div>
      <div>
        <input type="button" id="submit" value="提交">
      </div>
    </form>
    <script>
      $(function(){
        $("#submit").on('click',function(){
          var username = $("#username").val();
          var password = $("#password").val();
          var email = $("#email").val();
          var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

          if(username==""){
            alert("请输入用户名");
            return false;
          }

          if(password==""){
            alert("请输入密码");
            return false;
          }

          if(email==""){
            alert("请输入邮箱地址");
            return false;
          }

          if(!re.test(email)){
            alert("请输入正确的邮箱地址");
            return false;
          }

          alert("提交成功！");
          return true;
        });
      });
    </script>
  </body>
</html>

以上就是基于JQuery实现表单验证的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Jquery实现表单验证 - Python技术站