vue 使用element ui form表单自定义验证规则

最新推荐文章于 2025-06-11 19:09:55 发布

原创最新推荐文章于 2025-06-11 19:09:55 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Vue框架中的Element UI组件库创建带有手机号码验证功能的表单。通过自定义验证规则，确保输入的手机号码符合中国手机号的标准格式。

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

HTML

 <el-form :rules="rules" :model="formData" label-width="120px">
    <el-form-item label="手机号码："  prop="phone" required>
      <el-input v-model="formData.phone" placeholder="请输入手机号码"></el-input>
    </el-form-item>
  </el-form>

rules是必须要的，告诉定义规则， el-form-item里面的prop对应字rules的字段。一般跟form单表字段一样

export default {
  name: 'APP',
  data () {
    var phoneRuel = (rule, value, callback) => { // 判断手机号是否正确
      var reg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        phone: '',
      },
      rules: {
        phone: [
          {validator: phoneRuel, trigger: 'blur'}
        ]
      }
    }
  }
}