Element UI el-input 标签限制输入框内容(中文,英文,邮箱,手机号)
设置限制只能输入中文
校验中文的正则:/^[\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 标签限制输入框内容(中文,英文,邮箱,手机号)相关推荐
- php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
- element UI el-autocomplete 带输入建议的输入框
项目需求:需要用户在输入框中输入公司 全名 但是为了避免用户输入不全 需要做一个带输入建议的输入框 element组件: el-autocomplete class="inline ...
- input 标签实现输入框带提示文字效果
1.高版本浏览器 <input type="text" placeholder="提示内容"> 2.兼容低版本浏览器 <input type= ...
- Element UI 中 el-input 标签去掉边框的一种办法
最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的: HTML代码: <el-input v-model="input" ...
- Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
- Element UI关于 input禁止编辑
方法1: 添加 readonly 属性 readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本. <el-form-ite ...
- 基于Element ui 实现输入框只能输入数字并支持千分位
实现效果 设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...
- php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...
- 基于vue2.x和element ui的达达尼可采购平台
1. 项目实现 达达尼可采购平台最终目标是做成类似间采通.慧聪网.1688采购等b2b平台,但最终并未完成 具体详情请访问www.bixiaoyi.cn -项目主要分为用户注册登陆.企业用户主体和公司 ...
最新文章
- 1.9 通过反射获取注解信息
- Python-Opencv学习-实验-1:工具安装
- Java Servlet监听器的分类
- SQL 语句之insert语句插入数据:若表中有重复的主键或数据继续插入解决方案
- windows7电脑删除文件特别慢怎么回事
- html字居右垂直设置,css文字水平垂直居中怎么设置?
- dj鲜生-30-退出用户的登陆
- 查看linux网络带宽
- SQL Server相关知识
- html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
- 计算机考试c语言真题及答案,计算机二级c语言考试试题及答案
- java php rsa加密解密算法_PHP rsa加密解密算法原理解析
- python threading之条件变量同步(condition)
- linux中编辑pdf文件,Linux下PDF批注编辑软件Xournal
- Spurious Wakup
- Transformer相关的各种预训练模型优点缺点对比总结与资料收集(Transformer/Bert/Albert/RoBerta/ERNIE/XLnet/ELECTRA)
- FFmpeg 快速上手:命令行详解、工具、教程、电子书
- C语言|博客作业05
- 如何放大图片,教您三种方法!
- Matlab中左除(\)与右除(/)的区别