el-input验证手机号

html

<el-form ref="Form" :rules="rules" :model="edit" label-width="100px"><el-form-item label="联系方式" prop="phone"><el-input v-model="edit.phone"></el-input></el-form-item>
</rl-form>

js

  edit: {phone: ""},rules: {phone: [{ required: true, message: "请输入联系方式", trigger: "blur" },{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },{pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,//pattern: /^1[3456789]\d{9}$/,message: "请输入正确的手机号码",},],id_number: [{pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,message: "请输入正确的身份证号码",},],},

展示页面

vue+element-ui el-input验证手机号 / 身份证相关推荐

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

      方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

  2. Vue+Element UI 下,如何给一个表单设置自定义规则或多个验证规则(:rules)

    依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...

  3. Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

  4. 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出

    文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

  5. vue+element ui表单校验(邮箱、电话、工商信息)

    vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

  6. vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...

    点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

  7. 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架

    [Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...

  8. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  9. 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框

    文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...

  10. nodeJs + webpack+vue+ element ui 环境安装

    一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/  点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...

最新文章

  1. python发明者叫什么-python是谁的
  2. 帝国cms 多个php,帝国cms多值字段数据显示方法
  3. 第四范式携手智源研究院 共推全球最大智能模型应用发展
  4. TLS/SSL 工作原理及握手过程详解
  5. android 仿ios timepicker,android:TimePicker仿照IOS時間選擇器,可自定義選擇器
  6. 今天升级Xcode 7.0 bata发现网络访问失败。
  7. @RequestParam注解四个属性字段说明
  8. 7名高管、半数员工离职,如何再造乔布斯重返苹果神话?
  9. 【渝粤教育】广东开放大学 演绎娱乐经验管理 形成性考核 (49)
  10. fastjson SerializerFeature 详解
  11. Linux MPLS 总结
  12. 超好用的代码格式化工具Astyle使用
  13. jquery删除表格的行和列
  14. UE4蓝图学习篇(一)
  15. Oracle数据库数据同步方法
  16. WPF 背景透明文本不透明
  17. Java swing 写会员卡管理系统
  18. oracle 10g 新特性中文笔记(第五章)
  19. 伪造微信截图工具(改)
  20. Excel制作随机点名小程序

热门文章

  1. steam动物派对是什么_steam动物派对好玩_steam动物派对免费吗
  2. 恒源云_Gpushare.com | 不懂Linux,不配深度学习?
  3. k8s登录_登陆并访问k8s的apiserver
  4. C++ 函数对象学习笔记
  5. bootstrap的表单验证 vue_vue-form(vue表单验证插件 vue2.2+) 使用指南
  6. SQL Server 2008 连接JDBC详细图文教程
  7. [转载]基于遗传算法的高校排课系统研究
  8. 一杯奶茶引发的思考ROS2的前世今生
  9. 计算机语言讲解免疫系统,计算机语言与人类语言的互相渗透
  10. excel手机版_换手机哪个手机备份软件可以备份备忘录?推荐敬业签云同步便签