需求说明:

在系统中,添加数据和编辑数据一般共用一个对话框,但存在个别项是添加数据中存在而编辑数据中不存在的项,那么这种情况下如何进行校验呢,如果直接在rules里写上该项的校验,那么提交编辑时将会提示缺少该项参数。

解决方法:

以用户管理中添加用户/编辑用户为例,当添加用户时需要输入密码,而编辑时后台不返回密码项,因此不需要密码项,如下图:

    

(1)为el-form加上【:rules="userInfoFormRules"】,并在data中声明userInfoFormRules如下:

userInfoFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        no: [{ required: true, message: "请输入工号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,16}$/,
            message: "请输入长度为6-16位包含数字、字母、特殊字符的密码",
            trigger: "blur"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            pattern: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/,
            message: "手机号码格式错误",
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },

(2)为密码加加上校验判断【:rules="this.userInfoFormTitle=='添加用户' ? userInfoFormRules.password:[]"】,只有当对话框标题为“添加用户”时才加入【userInfoFormRules.password】中的校验,否则校验为空【[]】

<el-form-item
          v-show="this.userInfoFormTitle=='添加用户'"
          prop="password"
          :rules="this.userInfoFormTitle=='添加用户' ? userInfoFormRules.password:[]"
          label="密码"
          label-width="100px"
          size="mini"
        >
          <el-input v-model="userInfoForm.password"></el-input>
</el-form-item>

 

Logo

前往低代码交流专区

更多推荐