使用jQuery Validate验证表单数据

折扇掩笑颜

于 2024-08-29 18:02:55 发布

阅读量225

点赞数 9

文章标签： jquery

本文链接：https://blog.csdn.net/curtain_yemu/article/details/141685049

版权

在前端使用jQuery Validate验证表单数据，需要先引入jQuery和jQuery Validate的相关文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单验证</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">邮箱：</label>
    <input type="text" id="email" name="email"><br><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="提交">
  </form>

  <script>
    $(document).ready(function() {
      $('#myForm').validate({
        rules: {
          name: 'required',
          email: {
            required: true,
            email: true
          },
          password: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          name: '请输入姓名',
          email: {
            required: '请输入邮箱',
            email: '请输入有效的邮箱地址'
          },
          password: {
            required: '请输入密码',
            minlength: '密码长度不能少于6个字符'
          }
        },
        submitHandler: function(form) {
          form.submit();
        }
      });
    });
  </script>
</body>
</html>

在上面的代码中，使用了jQuery的$(document).ready()方法，在页面加载完成后执行相关代码。

在<form>标签上添加了id="myForm"，并在JS代码中使用$('#myForm').validate()来初始化表单验证。

在rules中定义了对每个字段的验证规则，比如name字段使用了required规则，email字段使用了required和email规则，password字段使用了required和minlength规则。

在messages中定义了对每个字段的错误提示信息。

在submitHandler中定义了验证通过时的提交处理，这里只是简单地调用了form.submit()提交表单。

当用户在表单中输入不符合规则的数据时，jQuery Validate会自动显示对应的错误提示信息，符合规则的数据可以正常提交。