jQuery form 表单验证插件(fieldValue)校验表单

jQuery form 表单验证插件(fieldValue)是一款常用的前端表单验证插件，它可以通过简单的配置，快速实现对表单的校验功能。下面将详细讲解如何使用该插件进行表单验证。

安装

安装该插件最简单的方式是通过CDN引入，可以在html文件中添加以下代码：

<script src="https://cdn.staticfile.org/jquery.form/4.3.0/jquery.form.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-field-validation/0.5.6/jquery.field.min.js"></script>

以上代码引用了jQuery表单插件和fieldValue插件，用来实现表单的提交和校验。

配置

在html代码中，需要为所有需要进行校验的表单元素添加class为“required”，这样，这些元素就会默认进行校验。当然，也可以通过配置自定义的class来实现表单元素的校验。

示例代码：

<form id="test-form">
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" class="required" />
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="text" name="email" class="required email" />
  </div>
  <div>
    <label for="phone">电话：</label>
    <input type="text" name="phone" class="required phone" />
  </div>
  <button type="submit">提交</button>
</form>

在代码中，可以看到，三个表单元素都添加了“required”class，表示这些元素必须填写才能提交表单。其中，邮箱和电话这两个输入框还分别添加了“email”和“phone”class，表示验证输入的内容是否符合邮箱和电话的格式。

接下来，需要在js代码中，为表单添加验证方法和错误提示信息，如下所示：

$(function() {
  $('#test-form').fieldValue({
    rules: {
      name: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        phone: true
      }
    },
    messages: {
      name: {
        required: '姓名不能为空',
        minlength: '姓名长度不能少于2个字符'
      },
      email: {
        required: '邮箱不能为空',
        email: '请输入有效的邮箱地址'
      },
      phone: {
        required: '电话不能为空',
        phone: '请输入有效的电话号码'
      }
    },
    success: function() {
      alert('表单提交成功！');
    },
    errorPlacement: function(error, element) {
      alert(error.text());
    }
  });
});

在以上代码中，可以看到，分别添加了校验规则和错误提示信息，同时设置了成功和失败的回调函数。

示例说明

示例一

假设需要对“邮箱”这个表单元素进行校验，要求输入的内容必须符合邮箱格式，否则则提示错误信息。

在html代码中，代码如下：

<div>
  <label for="email">邮箱：</label>
  <input type="text" name="email" class="required email" />
</div>

在js代码中，可以这样配置规则和错误信息：

$(function() {
  $('form').fieldValue({
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: {
        required: '邮箱不能为空',
        email: '请输入有效的邮箱地址'
      }
    },
    errorPlacement: function(error, element) {
      alert(error.text());
    }
  });
});

上述代码中，设置了“email”这个表单元素必须填写，并且必须符合邮箱格式。同时，设置了错误提示信息，如果用户填写了无效的邮箱，会弹出提示框。

示例二

假设需要对一个表单内的所有元素进行校验，并且每个表单元素填写时都需要满足最低长度要求。

在html代码中，代码如下：

<form id="test-form">
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" class="required" />
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="text" name="email" class="required email" />
  </div>
  <div>
    <label for="phone">电话：</label>
    <input type="text" name="phone" class="required phone" />
  </div>
  <button type="submit">提交</button>
</form>

在js代码中，可以这样配置规则和错误信息：

$(function() {
  $('#test-form').fieldValue({
    rules: {
      name: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        phone: true
      }
    },
    messages: {
      name: {
        required: '姓名不能为空',
        minlength: '姓名长度不能少于2个字符'
      },
      email: {
        required: '邮箱不能为空',
        email: '请输入有效的邮箱地址'
      },
      phone: {
        required: '电话不能为空',
        phone: '请输入有效的电话号码'
      }
    },
    errorPlacement: function(error, element) {
      alert(error.text());
    }
  });
});

以上代码中，设置了“name”、“email”和“phone”这三个表单元素必须填写，并且分别指定了最低字符数。同时，设置了错误提示信息，如果用户未填写或者填写的字符数不足，会弹出提示框。

综上所述，以上就是使用jQuery form 表单验证插件(fieldValue)校验表单的完整攻略，包含了安装、配置和两个示例。希望能对你有所帮助。