深入理解Jquery表单验证（使用formValidator）

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

深入理解JQuery表单验证（使用formValidator）

简介

JQuery表单验证是前端开发中经常使用到的技术之一，它可以对用户输入的表单数据进行自定义的验证。本篇文章将介绍如何使用 JQuery 插件 formValidator 进行表单验证。

安装

首先需要在项目中引入 JQuery 和 formValidator。

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.form-validator/2.3.96/jquery.form-validator.min.js"></script>
</head>

使用

1. HTML 代码

首先需要在HTML中定义需要验证的表单项，添加必要的标签属性和 class。

<form action="#" id="myform">
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" data-validation="required">
  </div>
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" data-validation="email">
  </div>
  <div>
    <label for="password">密码</label>
    <input type="password" id="password" name="password" data-validation="length" data-validation-length="min8">
  </div>
  <div>
    <button type="submit">提交</button>
  </div>
</form>

2. JS 代码

然后在JS中为表单项添加验证规则。

$(document).ready(function() {
  $.validate({
    form: '#myform',
    modules: 'security',
    lang: 'zh',
    validateOnBlur: false,
    errorMessagePosition: 'inline',
    onError: function() {
      alert('表单验证失败，请检查输入是否正确！');
    },
    onSuccess: function() {
      alert('表单验证成功！');
    }
  });
});

其中 form 表示要进行验证的表单的选择器， lang 表示语言， validateOnBlur 表示是否在失去焦点时进行验证， errorMessagePosition 表示显示错误信息的位置。

3. 验证规则

formValidator 内置了很多验证规则，也支持自定义规则。下面是一些常用的验证规则。

required

必填字段。

<input type="text" data-validation="required">

email

电子邮件格式验证。

<input type="email" data-validation="email">

length

长度验证。

<input type="text" data-validation="length" data-validation-length="min8,max12">

number

数字验证。

<input type="text" data-validation="number">

min / max

最小值和最大值验证。

<input type="number" data-validation="min0,max100">

4. 表单验证示例

我们建立一个简单的表单，用来验证用户填写的姓名和年龄是否符合要求。

<form action="#" id="myform">
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" data-validation="required">
  </div>
  <div>
    <label for="age">年龄</label>
    <input type="number" id="age" name="age" data-validation="number,min0,max100">
  </div>
  <div>
    <button type="submit">提交</button>
  </div>
</form>

然后在JS中为表单添加验证规则。

$(document).ready(function() {
  $.validate({
    form: '#myform',
    modules: 'security',
    lang: 'zh',
    validateOnBlur: false,
    errorMessagePosition: 'inline',
    onError: function() {
      alert('表单验证失败，请检查输入是否正确！');
    },
    onSuccess: function() {
      alert('表单验证成功！');
    }
  });
});

我们来看一下两个示例：

用户没有填写姓名时，会提示必填字段。

无姓名.png

用户输入的年龄小于0或者大于100时，会提示范围错误。

超出范围.png

总结

通过使用 formValidator 插件实现表单验证可以保证表单数据的有效性和安全性。在使用过程中需要灵活应用不同的验证规则，同时根据需要进行自定义规则的设置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：深入理解Jquery表单验证（使用formValidator） - Python技术站