iview自定义表单校验规则

在这里插入图片描述在这里插入图片描述

export default {
	data () {
		return {
			rules: {
                NodeNameCH: [
                    {required: true, message: '中文名称不能为空', trigger: 'blur'},
                    {validator:(rule, value, cb)=>{this.isNodeNameExist(value, cb)}, trigger: 'change'}
                ],
                nodeInsertIndex: [
                    {required: true, type: "number", message: '节点插入位置不能为空', trigger: 'change'},
                ]
		}
	},
	methods: {
		isNodeNameEnExist(value, cb, index = this.updateIndex){
            for(let i=0; i<this.nodesData.length; i++){
                let item = this.nodesData[i]
                if(item.NodeNameEN.trim() === value.trim()){
                    if(!index || (index && i!==index)){
                        return cb(new Error('节点名称已存在'))
                    }
                }
            }
            cb()
        },
	}
}

注意:
自定义校验的方法最后一定要执行callback函数(即cb())
否则,提交的时候校验validate方法不会执行

如果校验要依赖接口返回的结果,最好使用aysnc await的方式,
之前尝试在then里直接执行callback()方法,结果callback一直不执行
可能和validate校验也是异步执行有关
依赖接口返回值验证demo:

ruleValidate: {
 bucketName: [
      {
        required: true,
        pattern: /^[a-z0-9]+([a-z0-9-]{1,61})+[a-z0-9]$/,
        message:
          "Bucket名称只能包含小写字母、数字和“-”,开头结尾为小写字母和数字,且长度在3-63之间",
        trigger: "change"
      },
      {
        validator: validateBucket,
        trigger: "blur"
      }
  ],
}
const validateBucket = async (rule, value, callback) => {
      if (!value) {
        callback(new Error("bucket不能为空"));
      } else {
        let reg = /^[a-z0-9]+([a-z0-9-]{1,61})+[a-z0-9]$/;
        let re = new RegExp(reg);
        let res = re.test(value);
        if (!res) {
          callback(
            new Error(
              "Bucket名称只能包含小写字母、数字和“-”,开头结尾为小写字母和数字,且长度在3-63之间"
            )
          );
        } else {
          let result = await this.getBucketByName(value);
          if(typeof(result)=='string'){
              callback(new Error(result))
          }else{
              result ? callback(new Error("bucket已存在")) : callback();
          }
          
        }
      }
    };
getBucketByName(value) {
      return new Promise((resolve, reject) => {
        GetBucketByName(value).then(res => {
          if (res.errno === 0) {
            let isExit = false;
            for (let i = 0; i < res.data.length; i++) {
              let item = res.data[i];
              if (item.name === value) {
                isExit = true;
                break
              }
            }

            resolve(isExit);
          } else {
            resolve("bucket检测失败,请联系管理员");
          }
        });
      });
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值