设置限制只能输入中文

校验中文的正则:/^[\u4e00-\u9fa5]+$/

rules: {title: [{ required: true, message: "请输入中文名", trigger: "blur" },{validator: function(rule, value, callback) {if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {callback(new Error("请输入中文"));} else {//校验通过callback();}},trigger: "blur"}],
}

设置限制只能输入英文

校验英文的正则:/[a-zA-z]$/

rules: {title: [{ required: true, message: "请输入英文名", trigger: "blur" },{validator: function(rule, value, callback) {if (/[a-zA-z]$/.test(value) == false) {callback(new Error("请输入英文"));} else {//校验通过callback();}},trigger: "blur"}],
}

设置限制只能输入邮箱

校验邮箱的正则:/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

rules: {title: [{ required: true, message: "请输入邮箱", trigger: "blur" },{validator: function(rule, value, callback) {if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {callback(new Error("请输入邮箱"));} else {//校验通过callback();}},trigger: "blur"}],
}

设置限制只能输入手机号

校验手机号的正则:/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i

rules: {title: [{ required: true, message: "请输入手机号", trigger: "blur" },{validator: function(rule, value, callback) {if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {callback(new Error("请输入手机号"));} else {//校验通过callback();}},trigger: "blur"}],
}

设置限制只能输入中英文,数字,‘-’,‘_’

限制特殊字符的正则:/^[A-Za-z0-9-_\u4e00-\u9fa5]{4,30}$/

rules: {title: [{ required: true, message: "请输入", trigger: "blur" },{validator: function(rule, value, callback) {if (/^[A-Za-z0-9-_\u4e00-\u9fa5]{4,30}$/.test(value) == false) {callback(new Error("请输入"));} else {//校验通过callback();}},trigger: "blur"}],
}

校验数字的常用表达式

数字:^[0-9]*$
n位的数字:^\d{n}$
至少n位的数字:^\d{n,}$
m-n位的数字:^\d{m,n}$
零和非零开头的数字:^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(\.[0-9]{1,2})?$
带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})$
正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$
有两位小数的正实数:^[0-9]+(\.[0-9]{2})?$
有1~3位小数的正实数:^[0-9]+(\.[0-9]{1,3})?$
非零的正整数:^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数:^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非负整数:^\d+$ 或 ^[1-9]\d*|0$
非正整数:^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数:^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数:^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数:^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数:^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数:^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

校验字符的常用表达式

汉字:^[\u4e00-\u9fa5]{0,}$
英文和数字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符:^.{3,20}$
由26个英文字母组成的字符串:^[A-Za-z]+$
由26个大写英文字母组成的字符串:^[A-Z]+$
由26个小写英文字母组成的字符串:^[a-z]+$
由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串:^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+$^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

特殊校验的常用表达式

空白行的正则表达式:\n\s*\r (可以用来删除空白行)
日期格式:^\d{4}-\d{1,2}-\d{1,2}
腾讯QQ号:[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码:[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IPv4地址:((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
InternetURL:[a-zA-z]+://[^\s]*^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
国内电话号码(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}
身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X:(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
HTML标记的正则表达式:<(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式:^\s*|\s*$(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)

Element UI el-input 标签限制输入框内容(中文,英文,邮箱,手机号)相关推荐

  1. php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  2. element UI el-autocomplete 带输入建议的输入框

    项目需求:需要用户在输入框中输入公司 全名    但是为了避免用户输入不全   需要做一个带输入建议的输入框 element组件: el-autocomplete class="inline ...

  3. input 标签实现输入框带提示文字效果

    1.高版本浏览器 <input type="text" placeholder="提示内容"> 2.兼容低版本浏览器 <input type= ...

  4. Element UI 中 el-input 标签去掉边框的一种办法

    最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的: HTML代码: <el-input v-model="input" ...

  5. Element ui中table标签上下滚动时表格错位

    在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }

  6. Element UI关于 input禁止编辑

    方法1: 添加 readonly 属性 readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本. <el-form-ite ...

  7. 基于Element ui 实现输入框只能输入数字并支持千分位

    实现效果 设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...

  8. php输入框里的提示文字,input标签输入框带提示文字方法

    本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...

  9. 基于vue2.x和element ui的达达尼可采购平台

    1. 项目实现 达达尼可采购平台最终目标是做成类似间采通.慧聪网.1688采购等b2b平台,但最终并未完成 具体详情请访问www.bixiaoyi.cn -项目主要分为用户注册登陆.企业用户主体和公司 ...

最新文章

  1. 1.9 通过反射获取注解信息
  2. Python-Opencv学习-实验-1:工具安装
  3. Java Servlet监听器的分类
  4. SQL 语句之insert语句插入数据:若表中有重复的主键或数据继续插入解决方案
  5. windows7电脑删除文件特别慢怎么回事
  6. html字居右垂直设置,css文字水平垂直居中怎么设置?
  7. dj鲜生-30-退出用户的登陆
  8. 查看linux网络带宽
  9. SQL Server相关知识
  10. html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
  11. 计算机考试c语言真题及答案,计算机二级c语言考试试题及答案
  12. java php rsa加密解密算法_PHP rsa加密解密算法原理解析
  13. python threading之条件变量同步(condition)
  14. linux中编辑pdf文件,Linux下PDF批注编辑软件Xournal
  15. Spurious Wakup
  16. Transformer相关的各种预训练模型优点缺点对比总结与资料收集(Transformer/Bert/Albert/RoBerta/ERNIE/XLnet/ELECTRA)
  17. FFmpeg 快速上手:命令行详解、工具、教程、电子书
  18. C语言|博客作业05
  19. 如何放大图片,教您三种方法!
  20. Matlab中左除(\)与右除(/)的区别

热门文章

  1. 正则表达式,不包含某特殊符号
  2. HDFS基本操作的API
  3. 卡巴斯基 2050.earth 源码分享(完整)
  4. GAN原理总结以及对比
  5. Hadoop-Impala优化十大指导原则和最佳实践
  6. 基于DOS的简易俄罗斯方块制作
  7. 用Axure做的长图浏览交互稿怎么去掉侧边滚动条?
  8. AlertManager实现Email告警(使用Postman测试)
  9. 2022年湖北省武汉市隐形冠军工程工业企业奖励申报条件、材料及流程
  10. 如何在阿里云物联网平台上利用已有的 IoT Studio项目模板创建项目