美文网首页
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