需求:两个输入框,一个只能输入英文和数字,另一个只能输入中文和数字。
<el-input
placeholder="请输入角色英文名称..."
style="width: 300px"
v-model="newRoleNameEn">
<template slot="prepend">ROLE_</template>
</el-input>
<el-input
placeholder="请输入角色中文名称..."
style="width: 250px;margin-left: 5px"
v-model="newRoleNameZh">
</el-input>
<el-button type="success" @click="addNewRole" style="margin-left: 5px">添加角色</el-button>
设置 watch 监听 input 输入值
// 监听
watch:{
// 监听英文名只能输入英文和数字
newRoleNameEn:function(){
this.newRoleNameEn=this.newRoleNameEn.replace(/[\W]/g,'');
},
// 监听中文名只能输入中文和数字
newRoleNameZh:function(){
this.newRoleNameZh = this.newRoleNameZh.replace(/[^0-9\u4e00-\u9fa5]/g,'');
}
}
JavaScript 中 replace() 方法
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法
stringObject.replace( regexp/substr , replacement )
参数
regexp/substr :必需。规定子字符串或要替换的模式的 RegExp 对象。
请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。
replacement :必需。一个字符串值。规定了替换文本或生成替换文本的函数。
返回值
一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。