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】中的校驗，否則校驗爲空【[]】

<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>