2024年Web前端最全el-form表单验证的一些方法总结_el-form 必填验证，字节跳动Web前端三面凉凉

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

表单校验相关属性

• hide-required-asterisk：是否隐藏必填字段的标签旁边的红色星号（隐藏必录标识）
• inline-message：是否以行内形式展示校验信息（验证消息是否在一行显示）

方式一（无表单嵌套）

以一般的form表单为例：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name"> 
        <el-input v-model="ruleForm.name"></el-input> 
    </el-form-item>
<el-form>

一般在vue中这样来写,就可以对表单进行验证。

data(){
    return {
        ruleForm: { name: '' },
        rules: {
            name: [ 
                { required: true, message: '请输入活动名称', trigger: 'blur' }, 
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } 
            ]
        }
    }
},

如果有一些复杂的验证规则，也可以选择自定义验证, validator

data() {
 const userValidator = (rule, value, callback) => {
    if (value.length > 3) {
      callback()
    } else {
      callback(new Error('用户名长度必须大于3'))
    }
  }
  return {}
}
rules: {
      user: [
        { validator: userValidator, trigger: 'change' }
      ]
    }

方式二（表单嵌套）

嵌套的表单,一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data里面的model数据可能会是对象里面套对象的，el-form也同样支持嵌套的验证，写法一般如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    <el-form-item label="活动名称"> 
        <el-input v-model="ruleForm.name"></el-input>
        <el-form-item prop="info.name"> 
            <el-input v-model="ruleForm1.info.name"></el-input>

        </el-form-item>
    </el-form-item>
<el-form>

data(){
    return {
           ruleForm: {
                info: {
                    name: ''
                }
            },
    }
}


rules里面同样也可以这样写

rules: {
      info: {
          name: [{ required: true, message: '请选择', trigger: 'change' }],
      }
    }

方式三（动态表单验证）

• 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则.
• 动态添加form-item的时候，可以使用

<el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item>



### 最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**我特地针对初学者整理一套前端学习资料**

![前端路线图](https://img-blog.csdnimg.cn/img_convert/c58c87a1779f0d1dd90f8b0c61d383d8.webp?x-oss-process=image/format,png)

![vue.js的36个技巧](https://img-blog.csdnimg.cn/img_convert/ae035f92ef6a6d0304ecf94c83df286a.webp?x-oss-process=image/format,png)

d4c3ab8389e65ecb71ac0)**

**我特地针对初学者整理一套前端学习资料**

[外链图片转存中...(img-zME1dopI-1715367006547)]

[外链图片转存中...(img-jVYOagwH-1715367006548)]