jQuery validate 插件验证表单神器

本文整理了jQueryFormValidate的最新使用方法,包括提交事件、表单元素验证、错误显示、验证规则及消息等,同时提供了防止死循环的解决办法及Ajax提交示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前曾用过jQuery validator做过一些项目,但是最近又重新拾起,发现功能上升级了,一些之前的使用方法已经在报错了,于是乎再重新整理一篇博客汇总一下最新的jQuery form validate 使用教程。

jquery validate form

jQuery validate 使用方法

其中我们经常要用户表单提交事件,表单元素失去焦点后的验证事件,错误显示的方法,验证表单rules规则,验证表单rules规则对应的消息。

jQuery(document).ready(function ($) {
  $("#cf-order-checkout-form").validate({
    // custom handler to call named function "do_payment"
    submitHandler: function (form) {
      $(form).attr("target", "_blank");
      form.submit();
    },
    // validate the previously selected element when the user clicks out
    onfocusout: function (element) {
      $(element).valid();
    },

    errorPlacement: function (error, element) {
      if (element.attr('type') == 'radio') {
        error.appendTo(element.parent().parent());
      }
      else {
        error.appendTo(element.parent());
      }
    },

    // validation rules
    rules: {
      'address[province]': { required: true },
      'address[city]': { required: true },
      'address[county]': { required: true },
      'transaction[payment]': { required: true }
    },
    // validation messages
    messages: {
      'address[province]': {
        required: "请选择您的省份或自治区。"
      },
      'address[city]': {
        required: "请选择您的城市,地区或自治州。"
      },
      'address[county]': {
        required: "请选择您的区或县。"
      },
      'transaction[payment]': {
        required: "请选择一个支付方式。"
      }
    }
  });
});

其他使用方法请查看官方API函数。

jQuery validate submitHandler 导致死循环

防止表单提交死循环,应该用form.submit();而非$(form).submit();

submitHandler的form变量为dom,dom对象转换成jquery的对象,加上$()这个就行,然后就可以用jquery的语法来操作。

正确的使用提交表单方法:

submitHandler: function(form){
  form.submit();
}

这样就对了。

jQuery validate Ajax Submit

我们可以定义submitHandler函数中使用jQuery Ajax来请求处理。

$("#user-login").validate({
  // custom handler to call named function "do_payment"
  submitHandler: function (form) {
    $.ajax({
      type: "POST",
      url: '/ajax/user/login',
      data: {"name" : $(form).find('#edit-name').val(), "pass" : $(form).find('#edit-pass').val() },
      dataType: "json",
      success: function(data) {
        if (data.result) {
          location.reload();
        }
        else if(data.message) {
          alert(data.message);
        }
        else {
          alert('密码错误');
        }
      }
    });
  },
  // validate the previously selected element when the user clicks out
  onfocusout: function (element) {
    $(element).valid();
  },
  errorPlacement: function (error, element) {
    error.appendTo(element.parent());
  }
});

最后不得不感谢以下jQuery Validate插件作者。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值