formvalidator验证插件中有关ajax验证问题

下面是关于formvalidator验证插件中有关ajax验证问题的完整攻略。

什么是formvalidator？

formvalidator是一款轻量级的表单验证插件，使用简单方便，支持多种验证方式，包括required（必填项）、email（电子邮件格式）、phone（电话号码格式）等等。

为什么需要ajax验证？

当我们需要在表单中验证某些内容时，有些情况需要向服务器发送请求才能获得验证结果，这时候就需要使用ajax验证。比如说，我们需要验证用户的手机号是否已经被注册过，这时候需要向服务器发送请求，获取数据库中是否已经存在该手机号。

如何使用ajax验证？

在formvalidator插件中，使用ajax验证非常简单，只需要在验证规则中添加一个名为“Ajax”（大小写不限）的选项，并填写请求后端接口的URL即可。下面是一个示例：

<form>
  <!--手机号输入框-->
  <input type="text" name="phone" id="phone" />
</form>

<script src="jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script src="form-validator/locale/zh_cn.js"></script>
<script>
  $.validate({
    //设置验证规则
    rules: {
      //手机号必填，并且必须是手机号格式
      phone: {
        required: true,
        phone: true,
        //使用ajax验证
        ajax: {
          //请求后端接口的URL
          url: "/checkPhone",
          type: "POST",
          data: {
            phone: function () {
              //通过回调函数获取手机号输入框的值
              return $("#phone").val();
            }
          }
        }
      }
    },
    //给验证结果添加提示信息
    messages: {
      phone: {
        required: "手机号必填",
        phone: "手机号格式不正确",
        ajax: "手机号已经被注册"
      }
    }
  });
</script>

上面的示例中，我们先设置了一个必填且必须是手机号格式的验证规则，然后给该规则添加了一个名为“Ajax”的选项，并指定了请求后端接口的URL及其他一些参数。接下来，我们在messages中给验证结果添加了提示信息。

当用户输入手机号并离开该输入框后，插件会自动向服务器发送请求，获取验证结果，并根据返回值来判断输入是否合法，然后在页面上显示相应的提示信息。

注意事项

在使用ajax验证时，需要特别注意以下几点：

后端接口需要返回相应的验证结果，可以是JSON格式数据；
ajax验证只有在用户输入内容后离开输入框才会触发，如果希望在输入时进行验证，可以使用delay属性；
ajax验证需要服务器支持跨域访问，否则会出现跨域问题。

示例

下面是两个具体的示例，分别演示了如何使用ajax验证手机号和邮箱是否已经被注册。

验证手机号

<form>
  <!--手机号输入框-->
  <input type="text" name="phone" id="phone" />
  <!--提示信息-->
  <span id="phoneInfo"></span>
</form>

<script src="jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script src="form-validator/locale/zh_cn.js"></script>
<script>
  $.validate({
    //设置验证规则
    rules: {
      //手机号必填，并且必须是手机号格式
      phone: {
        required: true,
        phone: true,
        //使用ajax验证
        ajax: {
          //请求后端接口的URL
          url: "/checkPhone",
          type: "POST",
          data: {
            phone: function () {
              //通过回调函数获取手机号输入框的值
              return $("#phone").val();
            }
          }
        }
      }
    },
    //给验证结果添加提示信息
    messages: {
      phone: {
        required: "手机号必填",
        phone: "手机号格式不正确",
        ajax: "手机号已经被注册"
      }
    }
  });
</script>
<script>
  $(function () {
    //给手机号输入框设置失去焦点事件
    $("#phone").blur(function () {
      //如果输入为空或者格式不正确，就不进行ajax验证
      if ($(this).val() == "" || !/^1[3|4|5|7|8][0-9]\d{8}$/.test($(this).val())) return;

      //显示“正在验证”的提示信息
      $("#phoneInfo").html("正在验证...");

      //向服务器发送请求
      $.ajax({
        url: "/checkPhone",
        type: "POST",
        data: {
          phone: $(this).val()
        },
        dataType: "json",
        success: function (data) {
          //根据返回值判断是否已经被注册
          if (data.code == 0) {
            $("#phoneInfo").html("<span style='color:green;'>可以使用</span>");
          } else {
            $("#phoneInfo").html("<span style='color:red;'>已经被注册</span>");
          }
        },
        error: function () {
          //显示“验证失败”的提示信息
          $("#phoneInfo").html("<span style='color:red;'>验证失败，请稍后再试</span>");
        }
      });
    });
  });
</script>

验证邮箱

<form>
  <!--邮箱输入框-->
  <input type="text" name="email" id="email" />
  <!--提示信息-->
  <span id="emailInfo"></span>
</form>

<script src="jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script src="form-validator/locale/zh_cn.js"></script>
<script>
  $.validate({
    //设置验证规则
    rules: {
      //邮箱必填，并且必须是邮箱格式
      email: {
        required: true,
        email: true,
        //使用ajax验证
        ajax: {
          //请求后端接口的URL
          url: "/checkEmail",
          type: "POST",
          data: {
            email: function () {
              //通过回调函数获取邮箱输入框的值
              return $("#email").val();
            }
          }
        }
      }
    },
    //给验证结果添加提示信息
    messages: {
      email: {
        required: "邮箱必填",
        email: "邮箱格式不正确",
        ajax: "邮箱已经被注册"
      }
    }
  });
</script>
<script>
  $(function () {
    //给邮箱输入框设置失去焦点事件
    $("#email").blur(function () {
      //如果输入为空或者格式不正确，就不进行ajax验证
      if ($(this).val() == "" || !/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test($(this).val())) return;

      //显示“正在验证”的提示信息
      $("#emailInfo").html("正在验证...");

      //向服务器发送请求
      $.ajax({
        url: "/checkEmail",
        type: "POST",
        data: {
          email: $(this).val()
        },
        dataType: "json",
        success: function (data) {
          //根据返回值判断是否已经被注册
          if (data.code == 0) {
            $("#emailInfo").html("<span style='color:green;'>可以使用</span>");
          } else {
            $("#emailInfo").html("<span style='color:red;'>已经被注册</span>");
          }
        },
        error: function () {
          //显示“验证失败”的提示信息
          $("#emailInfo").html("<span style='color:red;'>验证失败，请稍后再试</span>");
        }
      });
    });
  });
</script>

以上是关于formvalidator验证插件中有关ajax验证问题的完整攻略，希望可以帮助到你。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：formvalidator验证插件中有关ajax验证问题 - Python技术站