element表單校驗~提交🔑🔒

💎目標界面：

1.引入elementUI組件，路由和axios配置

 

2.實現表單頁面佈局

      <!-- 註冊的表單區域 -->
      <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="10px" class="demo-ruleForm">
        <el-form-item  prop="name">
          <el-input v-model="regForm.name" placeholder="請輸入用戶名"  prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input v-model="regForm.password" placeholder="請輸入密碼"  prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item  prop="repassword">
          <el-input v-model="regForm.repassword" placeholder="請確認密碼"  prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-button class="btn-reg" type="primary" @click="reg(regForm)">註冊</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="text">去登錄</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>

    return {
      regForm:{
        name:'',
        password:'',
        repassword: ''
      },
      rules:{}
    }

效果圖：

3.添加Rules校驗規則

      regRules:{
        name:[
          { required: true,message:'請輸入用戶名稱',trigger:'blur', },
          // {min:2,max:5,message: '用戶名稱長度是2-5字符之間',trigger: 'blur'}
          // pattern: 指定正則來匹配
          { pattern: /^[a-zA-Z][a-zA-Z0-9]{0,9}$/, message: '用戶名必須是1 ~ 10位的字母或數字, 不能以數字開頭', trigger: 'blur' }
        ],
       password:[
         { required: true,message:'請輸入密碼',trigger:'blur', },
         // {min:6,max:15,message: '密碼長度是6-15字符之間',trigger: 'blur'}
         // pattern: 指定正則來匹配
         { pattern: /^\S{6,15}$/, message: '密碼必須是6 ~ 15位的非空字符', trigger: 'blur' }
       ],
        repassword:[
         { required: true,message:'請輸入密碼',trigger:'blur', },
         // {min:6,max:15,message: '密碼長度是6-15字符之間',trigger: 'blur'}
          // pattern: 指定正則來匹配
          { pattern: /^\S{6,15}$/, message: '密碼必須是6 ~ 15位的非空字符', trigger: 'blur' },
          { validator:checkPwd, trigger: 'blur'}  //驗證-兩次密碼一直
       ]
     },

4.判斷校驗是否通過

     // data下面寫：element 官網在這裏寫, 我們就模仿
    // 參數1：rule規則對象一般不用
    // 參數2：value當前校驗項的數據對象
    // 參數3：callback 回調函數，決定校驗是否通過：直接調用不傳參說明校驗通過，調用傳染錯誤對象說明校驗失敗！

  var checkPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請再次輸入密碼'));
        } else if (value !== this.regForm.password) {
          callback(new Error('兩次輸入密碼不一致!'));
        } else {
          callback();
        }
    }

5.提交表單數據-發送請求

查看代碼

reg(regForm){
  // this.$refs[regForm].validate((valid) => {
  // valid 是校驗是否通過的結果：true是通過，false沒通過
  this.$refs.regForm.validate((valid) => {
    if (valid) {
      console.log('通過')
      console.log(regForm)
      alert('submit!');
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}