vue-element 表单校验跟手动兜底

表单校验

• el-form 负责绑定model和rules
• el-form-item 负责绑定prop
• el-input 负责双向绑定具体的表单数据

   <el-card>
      <template #header>****运营后台</template>
      <!-- 登录表单 -->
      <el-form :model="formDate" :rules="formDataRules" ref="formDateRef">
        <el-form-item label="用户名:" prop="username">
          <el-input
            v-model="formDate.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            v-model="formDate.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="doLogin" type="primary">登录</el-button>
          <el-button @click="doReset" type="success">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

校验:

• required:非空
• trigger:何时进行校验 blur:失焦 change:表单数据发生改变
• min: 最小长度
• max: 最大长度
• message:提示信息

• validator:自定义表单校验 

• …element官网Form表单

校验规格书写位置:

   

 

自定义表单校验 (validator)

需要自己封装函数  格式为:

 const validCode = (rule, value, callback) =>{
   console.log(value)
}

手动兜底验证:(谨防部分大聪明 跳过校验规则,直接空白提交)

this.$refs.deptForm.validate((valid) =>{
 if(valid){
   //写校验成功的代码
  }

})