Vue el-input 输入限制 只能输入数字字母下划线等配置1、手机号输入限制 : 使用oninput onkeyupvalidatorel-form-item label联系方式 propphone el-input v-modelformData.phone placeholder请输入联系方式 clearable maxlength11 oninputif(value.length11)valuevalue.slice(0,11) onkeyupthis.value this.value.replace(/[^\d]/g,); /el-input /el-form-item export default { data() { const checkPhone (rule, value, callback) { // 手机号验证 if (!value) { return callback(new Error(手机号不能为空)); } else { const reg /^1[3456789]\d{9}$/ if (reg.test(value)) { return callback(); } else { return callback(new Error(请输入正确的手机号)); } } } return { rules: { phone: [ { required: true,validator: checkPhone, message: 请输入联系方式,trigger: blur } ], }, } }2、使用指令处理// 自定指令 Vue.directive(numeric, { bind(el) { el.addEventListener(input, () { el.value el.value.replace(/[^\d]/g, ) el.dispatchEvent(new Event(input)) }) } }) // 使用 el-input v-modelinputValue v-numeric /3、其他输入限制输入大小写字母、数字、下划线el-input typetext onkeyupthis.valuethis.value.replace(/[^\w_]/g,); /输入小写字母、数字、下划线el-input typetext onkeyupthis.valuethis.value.replace(/[^a-z0-9_]/g,);/输入数字和点el-input typetext onkeyupvaluevalue.replace(/[^\d.]/g,) /输入中文el-input typetext onkeyupthis.valuethis.value.replace(/[^\u4e00-\u9fa5]/g,)/能输入英文el-input typetext onkeyupthis.valuethis.value.replace(/[^a-zA-Z]/g,) /输入中文、数字、英文el-input onkeyupvaluevalue.replace(/[^\w\u4E00-\u9FA5]/g, ) /输入数字和字母el-input onKeyUpvaluevalue.replace(/[\W]/g,) / el-input onkeyupthis.valuethis.value.replace(/[\W]/g,);this.dispatchEvent(new Event(input)) /除了英文的标点符号以外其他的都可以中文英文字母数字中文标点el-input typetext onkeyupthis.valuethis.value.replace(/^[^!#$%^*()-]/g,) /只能输入数字代码(小数点也不能输入)el-input onkeyupthis.valuethis.value.replace(/\D/g,) onafterpastethis.valuethis.value.replace(/\D/g,) /只能输入数字,能输小数点el-input onkeyupif(isNaN(value))execCommand(undo) onafterpasteif(isNaN(value))execCommand(undo) / el-input nametxt1 onchangeif(/\D/.test(this.value)){alert(只能输入数字);this.value;} /只能输入字母和汉字el-input onkeyupvaluevalue.replace(/[\d]/g,) onbeforepasteclipboardData.setData(text,clipboardData.getData(text).replace(/[\d]/g,)) maxlength10 nameNumbers只能输入英文字母和数字,不能输入中文el-input onkeyupvaluevalue.replace(/[^\w\.\/]/ig,) /只能输入数字和英文el-input onKeyUpvaluevalue.replace(/[^\d|chun]/g,) /小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号el-input onKeyPressif((event.keyCode48 || event.keyCode57) event.keyCode!46 || /\.\d\d$/.test(value))event.returnValuefalse /小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号el-input onkeyupthis.valuethis.value.replace(/^(\-)*(\d)\.(\d\d).*$/,$1$2.$3) /el-input 只能输入数字且最多两位小数 dispatchEvent(new Event(input))el-input placeholder请输入价格 v-modelfeedsForm.price onkeyupthis.valuethis.value.match(/\d\.?\d{0,2}/);this.dispatchEvent(new Event(input)) / // vue的v-model是监听input框的input事件生效的。.native 而通过value直接操作dom元素vue的v-model是监听不到的 // 所以要手动分发一个input事件使v-model监听到。 // this.dispatchEvent(new Event(input))