Vue項目之實現登錄功能的表單驗證！

步驟：

配置 Form表單驗證;

1、必須給el-from組件綁定model 為表單數據對象

2 給需要驗證的表單項 el-form-item 綁定 prop 屬性需要指定表單對象中的數據名稱

只需要寫屬性名就可以了！ prop="mobile"

3 配置驗證規則！ 通過el-from 組件的 rules屬性配置驗證規則

這是我們要驗證的之一的表單項

綁定 prop 屬性需要指定表單對象中的數據名稱

   <el-form-item prop="mobile">
        <el-input
          v-model="user.mobile"
          placeholder="請輸入你的手機號"
        ></el-input>
      </el-form-item>

配置驗證規則！ 通過el-from 組件的 rules屬性配置驗證規則

  <el-form class="login-form" ref="form" :model="user" :rules="formRules">

 formRules: {
        // 表單驗證規則配置 required 代表是必填項！ 
        // message 就是他的提示消息！
        // trigger 代表觸發驗證的機制 blur 就是當鼠標失去焦點的時候觸發校驗！
        // min max 也就是長度的限制不能少於和不能大於的字符！
         mobile: [
            { required: true, message: '手機號不能為空！', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
      }

效果展示：

手動觸發表單驗證

1、給el-form設置ref 起個名字（隨便起名，不要重復即可)

 <el-form
      class="login-form"
      ref="manualVarifaction"
      :model="user"
      :rules="formRules"
    >

2、通過 ref獲 el-form 組件，調用組件的 validate 進行驗證！

 onLogin() {
      //獲取表單數掘【根據接口要求綁定數據！】
      const user = this.user;
      //表單驗證  this.$refs['']獲取ref組件
      // validate 是異步請求！
      this.$refs["manualVarifaction"].validate((valid, err) => {
        // 如果表單驗證失敗， 停止請求提交！
        if (!valid) {
          return;
        }
        console.log(valid);
        console.log(err); // 驗證失敗的字段！

        console.log(this.$refs["manualVarifaction"]);

        //驗證通過,請求登錄
        this.loginIn();
      });

      //處理后端響應結果l
      //    成功:XXX
      //    失敗:xXX
    },
    loginIn() {
      
      request({
        method: "POST",
        url: "/mp/v1_0/authorizations",
        //  data用來設置 POST 請求體
        data: this.user,
      })
        .then((res) => {
          //   登錄成功
          console.log(res);
        })
        .catch((err) => {
          //   登錄失敗
          console.log("登錄失敗", err);
        });
    }

效果展示

自定義驗證規則

 <!-- 當然你的規則還是要綁定到prop 屬性上面 如下！ -->
      <el-form-item prop="agree">
        <!-- `checked` 為 true 或 false -->
        <!-- 要讓復選框里的雙向綁定到user.agree  -->
        <el-checkbox v-model="user.agree">
          我己閱讀並同意用戶協議和隱私條款</el-checkbox
        >
      </el-form-item>

 agree: [
           {  
            // 自定義校驗規則！
          //  驗證通過： callback()
          // 驗證失敗！：callback(new Error('錯誤i的信息!'))
          // value 是一個布爾值！ 勾選選項value的值就會變成true
             validator: (rule, value, callback) => {
               console.log(rule, value)
               if (value) {

               } else {
                 callback(new Error('錯誤提示'))
               }
              
           },
              // message: "請勾選同意用戶協議!",
               trigger: "change" ,

            },
        ]

效果展示