当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Web编程入门 2.1 jQuery Validate方法 以及批量验证的修改方法

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

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

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

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

为了实现以下功能,可以在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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网