Vue+elementUl表单正则验证（验证手机号，邮箱，密码）

最新推荐文章于 2024-07-18 16:57:14 发布

吴小花的博客

最新推荐文章于 2024-07-18 16:57:14 发布

阅读量2.8k

点赞数 5

分类专栏： element-ui Vue.js 项目实战经验

本文链接：https://blog.csdn.net/weixin_39089928/article/details/111221719

版权

Vue.js 项目实战经验同时被 2 个专栏收录

52 篇文章 6 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

element-ui

18 篇文章 3 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用Vue和ElementUI进行表单验证，包括手机号、邮箱和密码的验证规则。通过在Form组件中设置验证规则，并利用`<el-form>`的ref属性和`methods`中的验证方法实现表单数据的有效性检查。

摘要由CSDN通过智能技术生成

效果：

需求：

给form表单增加，手机号，邮箱，密码验证规则

代码实现：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

    <!-- 弹出的编辑框 -->
    <el-dialog
      :title="editingStatus === 'editing' ? '编辑高校信息' : '新增高校信息'"
      width="700px"
      :visible.sync="popUp"
    >
      <!-- 编辑框中的表单 -->
      <el-form
        ref="form"
        :rules="rules"
        :model="form&#