element-ui 中表单校验的用法

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

表单校验在前端工作中非常常见，表单校验可以规范用户的输入，以及防止用户的误操作，确保用户提交数据的有效性。

表单验证属性

做表单验证离不开这三个属性model、rules、prop，当然也别忘了ref哈；

• model是待校验的对象：
• rules 定义校验规则；
• prop绑定要校验的表单域；

其中，rules和prop是一一对应的。

知道了，这些属性是干什么的，表单校验就学会一半了。

首先，在el-form标签里面添加:model="ruleForm"，:rules="rules"；

<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" > 然后在需要校验的el-form-item标签，加上prop属性绑定好表单域；

ps: 在el-form-item里面添加的prop属性，要与:model="ruleForm"的ruleFormm的属性一一对应。

<el-form-item prop="name">

最后，设置校验规则，校验待校验对象，提交的时候判断一下即可完成验证；

``` const rules = reactive ({ name: [ { // 必传项 required: true, // 提示文本 message: '请输入姓名', // 触发方式 trigger: 'blur' }, { // 最小长度 min: 2, // 最大长度 max: 8, message: '长度应为 2 到 8', trigger: 'blur' }, ], })

```

示例代码

```

提交

<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>

```

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！