Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性

最新推荐文章于 2024-01-14 16:34:03 发布

Harlan Wang

最新推荐文章于 2024-01-14 16:34:03 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue2.0 JavaScript 文章标签： vue 表单验证 JavaScript 正则表达式

本文链接：https://blog.csdn.net/qq_38661984/article/details/99968253

本文介绍了如何在Vue项目中利用正则表达式进行表单验证，包括在el-form组件中设置验证规则，定义data()中的registerRules对象，并创建全局validate.js文件以复用验证函数。文中提供了多种常见的正则表达式用于用户名、密码、真实姓名、身份证、手机号和邮箱等字段的合法性检查。

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

1. 给页面表单对象添加验证属性

由于我的项目使用的el-form,则给el-form添加属性 :rules="registerRules" ref="registerForm"

为el-form-item每个表单子项添加 prop 属性, 例如

<el-form-item prop="username">
  <el-input name="username" type="text" v-model="registerForm.username" placeholder="请设置登录用户名"></el-input>
</el-form-item>

2. rules是一个验证规则对象,因此需要在data()页面数据里添加registerRules对象:

      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        password_repeat: [{ required: true, trigger: 'blur', validator: this.validatePassRepeat }],
        bind_phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        realname: [{ required: true, trigger: 'blur', validator: validateRealName