iview-element中Form表单验证

validateField对一个字段验证

 this.$refs.thirdForm.validateField('phone', (phoneError) => {
        console.log(`${phoneError}***************************`);
 
        if (!phoneError) {
        console.log('验证通过')
}
//手机号验证码的验证
https://blog.csdn.net/qq_37782076/article/details/85123602

validateField对多个字段验证

 let fieldsToValidate = ['username', 'password', 'gender', 'email'];
  let _self = this;
  Promise.all(fieldsToValidate.map(item => {
    let p = new Promise(function (resolve, reject) {
      _self.$refs['form'].validateField(item, (error) => {
        resolve(error)
      })
    });
    return p;
  })).then((data) => {
    console.info(data)
    // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
    // 判断data 里是否全是空串
    
    // 去除数组空值
    data = data.filter(item => item)
    if(!data.length){
      console.log('通过验证')
    } else {
      console.log('验证不通过')
    }
  })

自定义校验规则

1,在form-item标签写入 prop=“ip”

<el-form-item label="IP/端口" v-if="changeWay==1" prop="ip">

2,在form绑定的rule="rules"里定义ip这个规则

//表单验证规则
                rules: {
                    ip: [
                        {validator: validIp, trigger: ["blur", 'change']},
                    ],
                    //validator: validIp是自定义

3,在data里定义规则

data() {
            let isnumber = (rule, value, callback) => {
                let num = String(this.takeServerForm.subscribeUnstructured.updateRate)
                if (!num.match("^[1-9]\\d*$") && num !== '') {
                    callback(new Error('请填写一个正整数'));
                }
                callback();
            };
            let validIp = (rule, value, callback) => {
                if (this.takeServerForm.subscribeUnstructured.ip.some(item => item.trim() === '')) {
                    callback(new Error('请输入IP'));
                    this.ipError=true
                }else {
                this.ipError=false
                callback();}
            };

与后台校验名称是否重复

之前想的是@blur事件发送请求,去标记是否重复,然后在规则里判断标记,
但是发现,vue是先校验规则,再去执行blur事件,所以第一次校验总是没用
把请求直接放在规则里就解决了

  let checkName = (rule, name, callback) => {
                this.axios({
                    method: 'get',
                    url: this.$store.state.url + '/publishResource/checkNameIsExist/',
                    params: {name: name}
                }).then(res => {
                    if (res.data.code === 200) {
                            return res.data.data
                    }
                }).then(isRep=>{
                    if (!name) {
                        return callback(new Error('名称不能为空'));
                    } else if (isRep) {
                        return callback(new Error('名称不能重复'));
                    } else {
                        callback();
                    }
                });
            };

重置表单,移除验证,移除部分验证,看文档