Vue中Form表单中添加Rules规则

最新推荐文章于 2025-05-29 17:20:20 发布

「已注销」

最新推荐文章于 2025-05-29 17:20:20 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue Vue模板开发文章标签： vue.js vue

本文链接：https://blog.youkuaiyun.com/C___man/article/details/123717637

本文介绍了在Vue.js应用中如何利用Rules规则进行表单验证。详细步骤包括在HTML中定义表单，data中设置Rules，以及在methods中处理验证逻辑。当表单提交时，会根据Rules自动检查输入是否符合要求，如不符则提示用户，Valid属性将反映验证结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、写入HTML

<el-form :model="pageForm" label-width="80px"  :rules="pageFormRules" ref="pageForm">
      <el-form-item label="文档部门" prop="archiveApartment">
        <el-input v-model="pageForm.archiveApartment" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档标签" prop="archiveNature">
        <el-input v-model="pageForm.archiveNature" auto-complete="off" ></el-input>
      </el-form-item>
      <el-form-item label="文档名称