element ui在不点击提交的时候校验表单内容及表单校验重置方法

//表单规则
guding_rules: { 
   endMonth:[
        { required: true,validator: endMonth, trigger: 'blur' }
    ],

},


//自定义表单规则
var endMonth = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入预计使用月份和已折旧月份'));
  } else {
     //如果输入的都是数字
     if(this.guding_form.setMonth < this.guding_form.getMonth){
         callback(new Error('已折旧月份不得大于预计使用月份'))
     }else{
         callback();
     }
  }
};

//手动校验
this.$refs.guding_form.validateField('endMonth');

在这里在介绍下表单常用的一些方法:

单个表单校验
this.$refs.form.validateField(‘productName’)

其中参数为该控件上的prop属性值;参数也可以是多个prop属性值构成的数组,可以对包含的部分控件进行校验。

对整个表单进行重置
this.$refs['form'].resetFields()

当然像datetimerange类型的日期控件是无法通过该方法进行重置,必须手动重置绑定的字段

清除校验提示语
this.$refs['form'].clearValidate()

如果仅需要清除单个控件的提示语,只要把该控件对应的prop属性值作为参数传入即可。
还有另外一种方式就是在该控件对应的el-form-item标签中增加ref属性值,然后调用clearValidate方法

你可能感兴趣的:(Vue技术)