Vue 中监听 input 输入框只能输入英文和数字、中文等

需求：两个输入框，一个只能输入英文和数字，另一个只能输入中文和数字。

<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 的第一次匹配或所有匹配之后得到的。

参考文档：https://www.w3school.com.cn/jsref/jsref_replace.asp