vue---rules表单校验规则取消

需求说明：

在系统中，添加数据和编辑数据一般共用一个对话框，但存在个别项是添加数据中存在而编辑数据中不存在的项，那么这种情况下如何进行校验呢，如果直接在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】中的校验，否则校验为空【[]】