antd a-form-model 动态表单 自定义校验柯里化

1. 需求

1. 前端通过后端字段遍历formItem
2. 由于字段可能是金额。电话号码等，单独if太多了太麻烦，所以想到柯里化

2. 代码

// 响应请求
xxx().then(res => {
        if (res.data.list.length == 0) {
          return false;
        }
        res.data.list.forEach(res => {
          this.$set(this.form, res.name, res.value); 
          // 动态添加校验规则
          this.rules[res.name] = {
            validator: curryingCheck(res.showtype,res.showname),
            required: true,
            trigger: "blur"
          };
        });
        // html通过遍历changeField得出表单
        this.changeField = res.data.list;
  });

export const isPrice = (rule, value, callback) => {
    const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
    if (value == '' || value == undefined || value == null) {
        callback('请输入金额！');
    } else {
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的金额！'));
        } else {
            callback();
        }
    }
}
export const isdefault = (rule, value, callback, text) => {
    if (value == '' || value == undefined || value == null) {
        callback(`请输入${text}`);
    }else{
        callback()
    }
}
//柯理化
export const curryingCheck = (type, limit) => {
	// 设置金额的type为2  这个值应当由后段传给我们
    let obj = { '2': isPrice }
    return function (rule, value, callback) {
        return !obj[type] ? isdefault(rule, value, callback, limit) : obj[type](rule, value, callback,...limit)
    }
}

3. 效果

相关数据

list = [
	{
		name: "diseasename",
		showname: "疾病名称",
		showtype: 1,
		value: "11"
	},
	{
		name: "totalmedicalexpenses",
		showname: "医疗总费",
		showtype: 2,
		value: 1,
	}
]

3. 小结

貌似element也是用的同个校验方法，通过这种方法就不用去if单个校验类型了，需要的话直接在校验里面添加校验规则就可以了