Web编程入门 2.1 jQuery Validate方法 以及批量验证的修改方法

表单验证是一个经常出现的需求，比如当我添加一个订单的时候，首先就要验证用户输入的数据是否合法，才能进行下一步的操作，因此，就需要进行表单验证。如下图：

不输入任何参数的情况下点击提交订单：

弹出错误信息，告诉用户需要提供相关信息。

为了实现以下功能，可以在js中进行如下设置：

(1)为需要进行验证的组件添加name

(2)在使用submit方法时直接进行验证

那么直接将validate方法放在js代码中执行即可，具体方法下面通过点击button时讨论

(3)通过点击button进行验证

因为可能在验证了这些基础的数据后，还要对数据进行进一步的校检，比如确定当前这个商品是否有超过数据库中规定的上限，因此这里就不能直接用submit来直接进行提交前的验证

首先设置验证方法如下：

function needvalidate() {
  return $('#quickForm').validate({
    rules: {
      username: {
        required: true
      },
      useraddress: {
        required: true
        minlength: 5
      },
      terms: {
        required: true
      },
      inputid:{
        required: true
      },
      inputamount:{
        required: true
      },
    },
    messages: {
      username: {
        required: "Please enter username"
        // email: "Please enter a vaild email address"
      },
      useraddress: {
        required: "Please provide user's address"
        // minlength: "Your password must be at least 5 characters long"
      },
      inputid:{ //注释了jquery-validation的670行
        required: "Please provide cloth's id"
      },
      inputamount:{
        required: "Please provide cloth's amount"
      },
      terms: "Please accept our terms"
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });

}

rules中规定了校检方法，当不满足校检条件时，会出发message中的对应的提示，最后的几个方法是用来进行提示信息的风格控制，这样就制定出了校检的规则与错误信息。

然后就是通过button点击事件调用这个方法，这里注意，直接使用

if(needvalidate()){
//do something
}

会没有反应，这时不会有任何的校检操作，需要以下格式：

if(needvalidate().form()){
//do something
}

这样就可进行表单的校检了。 

 

(4)对于数据的批量校检

比如我要批量添加一批服装，这个时候就会有多个服装ID，和服装数量，那么如何来校检其数据呢？肯定直接通过指定所有的服装的name都相同即可，但是这样在验证时会发现一个问题，那就是表单验证只验证了第一个name，其余的都没有验证，这里问题就出在jquery的validation原代码中，找到jquery下的jquery.validate.js，第670行，有以下代码：

这里通过其英文注释可以清楚的看到，只验证了所有name中的第一个，因此注释掉这一行，就可以对所有name相同的控件进行验证。

// Select only the first element for each name, and only those with rules specified
if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
	return false;
}

 

本文地址：https://blog.csdn.net/wybnmsl/article/details/107291231