element-ui Form表单校验小结及踩坑

Posted 2021-03-09 qdlhj

1、要验证输入只能为数字时

、

 

 

如果使用type=“number”样式这边去掉type=number时自带的属性

/* 去除webkit中input的type="number"时出现的上下图标 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

也可以用自带的rules校验，这边就统一提交的时候，校验

 

 

 2.整体校验时，可以写方法校验；

 

 

 

 

 

 3.根据条件判断表单里的 某一项动态变化是否必填；

示例如下：

 

 

 效果如下

 

 

 踩坑之路：

本打算通过动态判断prop的值来进行动态校验，但是这样*虽然会根据前面的条件而动态显示隐藏，但是rules中的验证不生效

 

 

以上方法只是动态修改了props属性，而并未出发表单的重新渲染，验证器中的prop属性并未更新，还是初次渲染时的空值，知道原因就想到了解决办法。

解决方法：

方法一：
动态响应的改变required的值；在rules里面可以不用加 requied

 

 

data里面的rules

 

 

 虽然这样可以动态控制必填跟非必填，但是必填是提示的  xxxx is required，这时候可以通过自定义validator来解决，默认提示，在data里面定义isEntrust

 

 

 还有一个问题，就是有时候必填转换为非必填时，提示语还是存在，可以单独进去清除

 

 

 综上可以解决

方法二：

直接改变当前对应项的 rules ;写对应需要的两套校验条件

 

 

 

方法三：

通过v-if和v-else写两个表单项，一个带prop属性，一个不带prop属性，通过强制销毁和创建表单实现表单的重新渲染需要加key（diff算法会复用组件，并没有重新渲染，需要加key）。

 

 

 

另外一种参考 https://blog.csdn.net/mineblogjw/article/details/85120384    https://www.jb51.net/article/159108.htm

补充简单好用的方法

直接通过提交的时候对单独的form里面的rules进行修改

 

 

4.取消部分表单字段校验结果;

 

 

 

5.resetFields与clearValidate方法

//根据需求二选一

this.$refs[refElement].resetFields(); //移除校验结果并重置字段值
  this.$refs[refElement].clearValidate(); //移除校验结果

6.同时校验多个表单

方法一：

//校验表单1
      var p1=new Promise(function(resolve, reject) { 
            this.$refs[form1].validate((valid) => {
                if（valid）{
                    resolve();
                }
            })
        });
        //校验表单2
        var p2=new Promise(function(resolve, reject) {
             this.$refs[form2].validate((valid) => {
              if（valid）{
                resolve();
              }
            })
        }); 
        
        Promise.all([p2,p1]).then(function(){
            alert("验证通过了");
        });

方法2

    this.$refs[form1].validate((valid) => { 
                if (valid) {
                  this.form1= true
                }
              });
         this.$refs[form2].validate((valid) => {
                if(valid){
                   this.form2= true
                } 
            });
          if (this.form1&& this.form2) {
             alert("验证通过了")
           } 

7.校验的几个方法

 

 

 

对于表单中部分字段的校验看如下的代码，当校验不通过时phoneError返回值为校验的提示信息，当通过时phoneError的值为空，所以if语句中用(！phoneError）表示校验通过，完整代码及页面展示图如上。

sendMsg(phoneNum) {
    this.$refs.thirdForm.validateField(‘phone‘, (phoneError) => {
        if(!phoneError){
            //当校验通过时，这里面写逻辑代码
        }
    })
};