Vue进阶（三十）：element-ui 表单验证_表单验证中err和ok的图标，字节前端面试必问

### 二、自定义验证逻辑


实现思路



> 
> 1. `html`中给`el-form`增加 `:rules="rules"`;
> 2. `html`中在`el-form-item` 中增加属性 `prop="名称"`;
> 3. `js`中直接在`data`中在`rules`中的名称对应设置 `validator: 验证器名称`,;
> 4. `js`中在`data`中 `return`之上书写验证器对应的js验证逻辑;
> 
> 
> 


**html部分**

**js部分**

效果图如下  
 ![在这里插入图片描述](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5673858140c14046840c2d0c6c9085f6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407396&x-signature=VpmMNzbKa3T4QbrneHNEU5O4r8Y%3D)


### 三、表单提交


实现思路



> 
> 1. `html`中给`el-form`增加 `ref="form" :model="ruleForm"`;
> 2. `html`中给提交按钮增加点击事件 `@click="submitForm('form')"`中对应`form`的`ref="form"`;
> 
> 
> 


`js`中直接在`methods`中定义提交事件 `submitForm(){}`


**html部分**

//form //表单项 ... //提交按钮 <el-button class="btn-login" type="primary" size="medium" @click="submitForm('ruleForm')">立即登录

**js部分**

methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { //如果通过验证 to do... } else { console.log('error submit!!') return false } }) }

### 四、拓展阅读


在对表单`日期/时间选择器`进行校验的时候，`rules`中需要增加`type='date'`，否则会提示**类型错误**。例如，

rules: { endSendTimeStr : [

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：docs.qq.com/doc/DSmRnRG…