限制输入方式
输入时判断
<template>
<div>
<card>
<Input
style="width: 200px;"
placeholder="请输入内容"
@on-keyup="btKeyUp"
@on-keydown="btKeyDown"
/>
</card>
</div>
</template>
<script>
export default {
methods: {
// 只能输入汉字、英文、数字
btKeyDown(e) {
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
},
//限制输入特殊字符
btKeyUp(e) {
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g,"");
}
}
};
</script>
输入完成后判断
核心代码
var reg = /^[0-9]+$/;
if (!reg.test(num)) {
this.$Message.info("请输入数字");
}
整体样式
<template>
<div>
<card>
<Input
v-model="num"
style="width: 200px;"
placeholder="请输入内容"
/>
<Button type="primary" @click="BtnNum">验证</Button>
</card>
</div>
</template>
<script>
import axios from "axios";
export default {
data () {
return {
num:''
}
},
methods: {
BtnNum() {
var vm = this;
var num = vm.num;
var reg = /^[0-9]+$/;
if (!reg.test(num)) {
vm.$Message.info("请输入数字");
}
}
}
};
</script>
限制输入内容
形式一
// 只能输入汉字
var reg = /^[\u0391-\uFFE5]+$/;
// 只能输入英文字母
var reg = /^[a-zA-Z]*$/;
// 只能输入数字
var reg = /^[0-9]+$/;
// 只能输入英文字母、数字
var reg = /^[0-9a-zA-Z]*$/;
// 邮箱验证
var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
// 手机号验证
var reg = /^(13[0-9]|14[56789]|15[0-3,5-9]|166|17[0135678]|18[0-9]|19[89])\d{8}$/;
形式二
// 不能输入特殊字符
e.target.value = e.target.value.replace(/[^u4e00-u9fa5w]/g,"");
// 只能输入数字
e.target.value = e.target.value.replace(/[^0-9]/g,"");
// 只能输入数字、小数点
e.target.value = e.target.value.replace(/[^\0-9\.]/g,"");
// 只能输入英文
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z]/g,"");
// 只能输入英文、数字
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9]/g,"");