element表单验证及清除校验

<el-form class="task-dialog-form" :model="againForm" :rules="againRules" size="small" ref="againForm" label-width="80px">
    <el-row>
      <el-col :span="22">
        <el-form-item label="友好度" prop="value" class="box-range" ref="againValue">
          <div class="item-right rot-core" style="padding-top:7px;">
            <el-rate v-model="againForm.value" :texts="rateTexts" @change="changeRate" show-text>
            </el-rate>
    <!-- <span class="rate-text" v-if="value == 0">请评分</span> -->
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
        <el-col :span="22">
            <el-form-item label="备注" prop="againText" class="box-range">
                <el-input type="textarea" :rows="6" maxlength="500" size="small"  placeholder="请输入" v-model="againForm.againText"></el-input>
                <span class="box-range-span">{{againForm.againText?againForm.againText.length:0}}/500</span>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="22">
            <el-form-item label="备注" prop="phone" class="box-range">
                <el-input type="text" size="small"  placeholder="请输入" v-model="againForm.phone"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
</el-form>

js中

import * as elValudate from '@/assets/js/elValidate' // 引入自定义校验方法

data(){
    // 行内自定义校验
    var validatePass = (rule, value, callback) => {
        if (value === '' || value == undefined || value == 0) {
          callback(new Error('请点击选择评分'));
        } 
        callback();
      };
    return {
    againForm:{},
      againRules:{
        againText:[
          { required: true, message: '请输入备注', trigger: 'blur' },
        ],
        value:[
          // { required: true, message: '请点击进行评分', trigger: 'blur' },
          {validator:validatePass,trigger: 'change'},
        ],
        phone:[
            {validator:elValudate.elValidatePhone,trigger: 'blur'},
        ]
      }
    }
},
mounted(){
    this.clearValidate('againForm') // 清除整个表单的校验
    this.clearValidate('againValue') // 清除againValue的校验
},
methods : {
    clearValidate(formName) {
      this.$refs[formName].clearValidate();
    },
}

 自定义校验文件 elValidate.js

// 手机号
export function elValidatePhone(rule, value, callback) {
    if (value == '') {
        return callback(new Error('手机号码不能为空'))
    } else {
        let re = /^1[23456789]\d{9}$/;
        if (!re.test(value)) {
            return callback(new Error('手机号码输入格式有误'))
        }
        return callback();
    }
}