FE_bankTeaching/test.js

data() {
    var validateEveryData = (rule, value, callback) => {
      //   console.log("callback", callback);
      //   console.log("校验某一项的规则对象", rule);
      //   console.log("用户输入的值", value);

      // 对输入框类型的校验
      if (value) {
        if ((value + "").length > 0) {
          // 用于回显时候的校验，因为输入的时候是字符串类型的数字，但是回显的时候可能就是数字
          callback(); // cb函数告知校验结果，必须要加
          return;
        }
      }

      // 对下拉框类型的校验
      if (
        (rule.itemType == "selectOne") |
        (rule.itemType == "selectTwo") |
        (rule.itemType == "selectThree")
      ) {
        if (value) {
          if ((value + "").length > 0) {
            // 注意枚举值是数字类型的，所以这里要转换成为字符串类型的
            callback();
            return;
          }
        }
      }

      // 根据不同的类型给予不同的校验提示
      switch (rule.itemType) {
        case "text":
          callback(new Error(rule.labelName + "不能为空")); // 文本类型的规则简单，就是得填写
          break;
        case "number":
          callback(new Error(rule.labelName + "请按规则填写")); // 数字类型的规则比较繁多
          break;
        case "textarea":
          callback(new Error(rule.labelName + "不能为空")); // 文本域类型的规则也简单，就是得填写
          break;
        case "selectOne":
          callback(new Error("请选择" + rule.labelName)); // 下拉框类型一 得填写
          break;
        case "selectTwo":
          callback(new Error("请选择" + rule.labelName)); // 下拉框类型二 得填写
          break;
        case "selectThree":
          callback(new Error("请选择" + rule.labelName)); // 下拉框类型三 多选数组得填写
          break;
        case "dateRange":
          callback(new Error("请选择" + rule.labelName + "范围")); // 下拉框类型三 多选数组得填写
          break;

        default:
          break;
      }
    };
    return {
      // 此对象用于存储各个下拉框的数组数据值，其实也可以挂在vue的原型上，不过个人认为写在data中好些
      selectTwoOptionsObj: {},
      // 用于下拉框加载时的效果
      loadingSelect: false,
      // 绑定的数据
      form: {},
      // 校验规则
      validateEveryData: validateEveryData,
    };
  },

作者：水冗水孚
链接：https://juejin.cn/post/7060322827148197895
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。