美文网首页
element rules 几种方式

element rules 几种方式

作者: kalrase | 来源:发表于2019-05-16 08:34 被阅读0次

1、行内简单

<el-form-item
        label="paramValue:"
        prop="paramValue"
        :rules="[
      { required: true, message: 'paramValue不能为空'},
      { type: 'number', message: 'paramValue必须为数字值'}
    ]"
      >

提交调用验证

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

2、组件封装配置项

1 data里面

data() {
    var validateNumber=(rule, value, callback) => {
      if (value < 0) {
        callback(new Error("请输入正数!"));
      } else {
        callback();
      }
    };
    return {}
}

formSettings: [
        {
          items: [
            {
              label: "app名字",
              name: "appName",
              type: "text",
              valueType: "string",
              disabled: false,
              required: true,
              placeholder: "请输入app名字",
              rule: [
                {
                  required: true,
                  validator:validateNumber,
                  trigger: "blur"
                }
              ]
            },]
}]

2 methods 里面

methods:{
validatePass(rule, value, callback) {
      let data = {
        tenantId: this.currentUser,
        name: value
      };
//发送请求
      return new Promise((resolve, reject) => {
        checkName(data)
          .then(response => {
            if (response.data.result == true) {
              callback();
            } else {
              callback(new Error("名称重复,请重新输入"));
            }
            resolve();
          })
          .catch(reject => {
            console.log(reject);
          });
      });
    }
}

//设置
formSettings: [
        {
          items: [
            {
              label: "app名字",
              name: "appName",
              type: "text",
              valueType: "string",
              disabled: false,
              required: true,
              placeholder: "请输入app名字",
              rule: [
                {
                  required: true,
                  validator:this.validatePass,
                  trigger: "blur"
                }
              ]
            },]
}]



相关文章

网友评论

      本文标题:element rules 几种方式

      本文链接:https://www.haomeiwen.com/subject/vapmaqtx.html