el-input 标签限制输入框内容(中文,英文,邮箱,手机号)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了el-input 标签限制输入框内容(中文,英文,邮箱,手机号)相关的知识,希望对你有一定的参考价值。
参考技术A 1.设置限制只能输入中文
校验中文的正则:/^[\\u4e00-\\u9fa5]+$/
2.设置限制只能输入英文字母 不区分大小写
校验英文的正则:/[a-zA-z]$/
3.设置限制只能输入邮箱
校验邮箱的正则:/^([a-zA-Z0-9]+[ | |.]?) [a-zA-Z0-9]+@([a-zA-Z0-9]+[ | |.]?)[a-zA-Z0-9]+.[a-zA-Z]2,3$/
4.设置限制只能输入手机号
校验手机号的正则:/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\\d8$/i
5.设置限制只能输入中英文,数字,‘-’,‘ ’
限制特殊字符的正则:/^[A-Za-z0-9- \\u4e00-\\u9fa5]4,30$/
其它 :
校验数字的常用表达式
数字:^[0-9]
至少n位的数字:^\\dn,
零和非零开头的数字:^(0|[1-9][0-9] )
带1-2位小数的正数或负数:^(-)?\\d+(.\\d1,2)
有两位小数的正实数:^[0-9]+(.[0-9]2)?
非零的正整数:^[1-9]\\d 或 ^+?[1-9][0-9] 或 ^-[1-9]\\d 或 ^[1-9]\\d |0 或 ^((-\\d+)|(0+)) 或 ^[1-9]\\d .\\d |0.\\d [1-9]\\d |0?.0+|0 或 ^(-([1-9]\\d .\\d |0.\\d [1-9]\\d ))|0?.0+|0 或 ^(([0-9]+.[0-9] [1-9][0-9] )|([0-9] [1-9][0-9] .[0-9]+)|([0-9] [1-9][0-9] )) 或 ^(-(([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?.0+|0)$
校验字符的常用表达式
汉字:^[\\u4e00-\\u9fa5]0, 或 ^[A-Za-z0-9]4,40
由26个英文字母组成的字符串:^[A-Za-z]+
由26个小写英文字母组成的字符串:^[a-z]+
由数字、26个英文字母或者下划线组成的字符串:^\\w+
中文、英文、数字包括下划线:^[\\u4E00-\\u9FA5A-Za-z0-9_]+ 或 ^[\\u4E00-\\u9FA5A-Za-z0-9]2,20$
特殊校验的常用表达式
空白行的正则表达式:\\n\\s \\r (可以用来删除空白行)
日期格式:^\\d4-\\d1,2-\\d1,2
腾讯QQ号:[1-9][0-9]4, (腾讯QQ号从10000开始)
中国邮政编码:[1-9]\\d5(?!\\d) (中国邮政编码为6位数字)
IPv4地址:((2(5[0-5]|[0-4]\\d))|[0-1]?\\d1,2)(.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d1,2))3
InternetURL:[a-zA-z]+://[^\\s] 或 ^http://([\\w-]+.)+[\\w-]+(/[\\w-./?%&=] )? )|(^\\d18 )
html标记的正则表达式:<(\\S ?)[^>] >. ?|<. ? /> ( 首尾空白字符的正则表达式:^\\s |\\s* ) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式)
————————————————
希望是一扇门,推开便是阳光所在。
el-table点击单元格切换成可输入状态el-input
思路:
1.使用el-table提供的scope,可获取被点击行的索引,行数据,列数据等
2.在template中写好el-input和p标签,不点击单元格时显示p标签,展示默认数据;点击时显示el-input标签,可编辑
3.输入框获取焦点时,保存当前数据;修改数据后,与原数据比较,若有变动,失去焦点后提示”修改成功“
效果:
代码:
html:
<div id="app">
<el-table :data="dataList" style="width: 100%;" size="small">
<el-table-column label="序号" width="140" width="60" prop="num" v-model="dataList.num"></el-table-column>
<el-table-column label="名称" width="120">
<!-- 关键代码 -->
<template slot-scope="scope">
<el-input v-if="scope.row.isnameSelected" v-model="scope.row.name"
@focus="focusEvent(scope.row,scope.$index,scope.column)"
@blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
<p @click="cellClick(scope.row, scope.column)" v-else>scope.row.name</p>
</template>
</el-table-column>
<el-table-column label="年龄" width="120">
<!-- 通过isageSelected显示或隐藏 -->
<template slot-scope="scope">
<el-input v-if="scope.row.isageSelected" v-model="scope.row.age"
@focus="focusEvent(scope.row,scope.$index,scope.column)"
@blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
<p @click="cellClick(scope.row, scope.column)" v-else>scope.row.age</p>
</template>
</el-table-column>
<el-table-column label="金额" width="120">
<template slot-scope="scope">
<!-- 通过issalSelected显示或隐藏 -->
<el-input v-if="scope.row.issalSelected" v-model="scope.row.money"
@focus="focusEvent(scope.row,scope.$index,scope.column)"
@blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
<p @click="cellClick(scope.row, scope.column)" v-else>scope.row.money</p>
</template>
</el-table-column>
</el-table>
</div>
data:
data:
// 需要展示的数据,模拟从接口或组件传递过来的值
dataList: [
name: "测试1", age: 24, num: 10010, money: "1200" ,
name: "测试2", age: 24, num: 10011, money: "1200" ,
name: "测试3", age: 24, num: 10012, money: "1200" ,
name: "测试4", age: 24, num: 10013, money: "1200"
]
自定义指令focus:
//自定义指令
directives:
focus:
inserted: function (el)
el.querySelector('input').focus()
methods:
修改数据,辅助每列单元格被选中时的隐藏与显示
//请求接口
getList()
//遍历,给每项数据添加上某列是否被选中的flag,需要改成可修改的列数都要添加flag,且与上面v-if的一致
this.dataList = this.dataList.map((item) =>
return ...item, isnameSelected: false, isageSelected: false, issalSelected: false
);
由于我的数据是自定义的,不由接口返回和组件传递而来,所以数据的修改设置在created阶段
created()
this.getList()
点击单元格:
//点击文本触发,显示input框,隐藏p标签
cellClick(row, column)
if (column.label == "名称")
row.isnameSelected = !row.isnameSelected
else if (column.label == "年龄")
row.isageSelected = !row.isageSelected
else if (column.label == "金额")
row.issalSelected = !row.issalSelected
点击输入框,获得焦点时
//点击输入框聚焦,存储当前值
focusEvent(row, index, column)
if (column.label == "名称")
row.oldName = row.name
else if (column.label == "年龄")
row.oldAge = row.age
else if (column.label == "金额")
row.oldSal = row.money
完成输入,点击其他处,失去焦点:
//输入框失去焦点触发,此处用提示框提示修改
blurEvent(row, curIndex, column)
if (column.label == "名称")
row.isnameSelected = !row.isnameSelected
if (row.name !== row.oldName)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
else if (column.label == "年龄")
row.isageSelected = !row.isageSelected
if (row.age !== row.oldAge)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
else if (column.label == "金额")
row.issalSelected = !row.issalSelected
if (row.money !== row.oldSal)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
app组件完成代码
<script>
var vm = new Vue(
el: "#app",
data:
// 需要展示的数据,模拟从接口或组件传递过来的值
dataList: [
name: "测试1", age: 24, num: 10010, money: "1200" ,
name: "测试2", age: 24, num: 10011, money: "1200" ,
name: "测试3", age: 24, num: 10012, money: "1200" ,
name: "测试4", age: 24, num: 10013, money: "1200"
]
,
created()
this.getList()
,
//自定义指令
directives:
focus:
inserted: function (el)
el.querySelector('input').focus()
,
methods:
getList()
//遍历,给每项数据添加上某列是否被选中的flag,需要改成可修改的列数都要添加flag,且与上面v-if的一致
this.dataList = this.dataList.map((item) =>
return ...item, isnameSelected: false, isageSelected: false, issalSelected: false
);
,
//点击输入框聚焦,存储当前值
focusEvent(row, index, column)
if (column.label == "名称")
row.oldName = row.name
else if (column.label == "年龄")
row.oldAge = row.age
else if (column.label == "金额")
row.oldSal = row.money
,
//输入框失去焦点触发,此处用提示框提示修改
blurEvent(row, curIndex, column)
if (column.label == "名称")
row.isnameSelected = !row.isnameSelected
if (row.name !== row.oldName)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
else if (column.label == "年龄")
row.isageSelected = !row.isageSelected
if (row.age !== row.oldAge)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
else if (column.label == "金额")
row.issalSelected = !row.issalSelected
if (row.money !== row.oldSal)
this.$message(
message: '修改成功',
type: 'success',
duration: 1000
)
,
//点击文本触发,显示input框,隐藏p标签
cellClick(row, column)
if (column.label == "名称")
row.isnameSelected = !row.isnameSelected
else if (column.label == "年龄")
row.isageSelected = !row.isageSelected
else if (column.label == "金额")
row.issalSelected = !row.issalSelected
);
</script>
以上是关于el-input 标签限制输入框内容(中文,英文,邮箱,手机号)的主要内容,如果未能解决你的问题,请参考以下文章
vue+element 中 el-input框 限制 只能输入数字及几位小数(自定义)和输入框之键盘
elementUi里面的el-input框有时候无法输入的问题