【限制输入框值类型】自定义指令el-input输入类型限制,vue和html两个版本-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
前言
经常遇到输入框需要限制只能输入数字的
因为用户很离谱明显输入数字的地方他非要输入英文或者中文
但是用到UI框架或者自己写方法验证表单比较麻烦
为了一个输入框专门去弄一个验证很麻烦
所以这里就整合了两种自定义指令的方式更加方便使用
vue版本和 html版本都有。
vue版本自定义指令写法
1弄一个input.js文件复制下面代码
export default {
bind(el, binding, vnode) {
const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;
input.addEventListener('compositionstart', () => {
vnode.locking = true//解决中文输入双向绑定失效
})
input.addEventListener('compositionend', () => {
vnode.locking = false//解决中文输入双向绑定失效
input.dispatchEvent(new Event('input'))
})
//输入监听处理
input.onkeyup = () => {
if (vnode.locking) {
return;
}
// v-input.num
if (binding.modifiers.num) {//只能输入数字开头可以多个0
onlyNum(input);
}
//v-input.num_point
else if (binding.modifiers.num_point) {//只能输入数字+小数点可以多个小数点
onlyNumPoint(input)
}
//v-input.float
else if (binding.modifiers.float) {//只能输入浮点型只能一个小数点
onlyFloat(input, binding.value)
}
// v-input.int
else if (binding.modifiers.int) {//只能输入整数0+正整数开头不能多个0
onlyInt(input)
}
//v-input.intp
else if (binding.modifiers.intp) {//只能输入正整数
onlyIntp(input)
}
//v-input.alp
else if (binding.modifiers.alp) {//只能输入字母
onlyAlp(input)
}
//v-input.num_alp
else if (binding.modifiers.num_alp) {//只能输入数字+字母
onlyNumAlp(input)
}
//v-input.arith
else if (binding.modifiers.arith) {//四则运算符+数字
onlyArith(input)
}
input.dispatchEvent(new Event("input"));
}
//数字
function onlyNum(input) {
input.value = input.value.replace(/\D+/g, '');
}
//整数(0+正整数)
function onlyInt(input) {
let value = input.value;
value = value.replace(/\D+/g, '');
input.value = value ? Number(value).toString() : value//去掉开头多个0
}
//正整数
function onlyIntp(input) {
if (!/^[1-9][0-9]*$/.test(input.value)) {
let value = input.value.replace(/\D+/g, '');
if (value && value.substring(0, 1) === '0') {//0开头去除0
value = value.substring(1)
}
input.value = value
}
}
//数字+小数点
function onlyNumPoint(input) {
input.value = input.value.replace(/[^\d.]/g, "");
}
//浮点型
// eslint-disable-next-line no-unused-vars
function onlyFloat(input, n) {
let value = input.value;
value = value.replace(/[^\d.]/g, '');
value = value.replace(/^\./g, '');
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
if (n&&Number(n)>0) {//限制n位
var d = new Array(Number(n)).fill(`\\d`).join('');
// eslint-disable-next-line no-useless-escape
var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');
value = value.replace(reg, '$1$2.$3')
}
if (value && !value.includes('.')) {
value = Number(value).toString()//去掉开头多个0
}
input.value = value
}
//字母
function onlyAlp(input) {
input.value = input.value.replace(/[^A-Za-z]/g, '');
}
//数字+字母
function onlyNumAlp(input) {
input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
}
//四则运算+-*/()数字
function onlyArith(input) {
let value = input.value
if (value) {
input.value = value.split('').reduce((prev, cur) => {
// eslint-disable-next-line no-useless-escape
if (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {
return prev + cur
}
return prev
}, '')
}
}
},
}
2注册自定义指令
import input from "./input.js";
export default{
install:Vue=>{
Vue.directive('input',input)
}
}
3全局注册方法
main.js
import inputDirective from './directive/input/install';
Vue.use( inputDirective );
4页面使用
<!-- 只能数字 -->
<el-input v-input.num v-model="input"></el-input>
<!-- 只能数字+小数点 -->
<el-input v-input.num_point v-model="input"></el-input>
<!-- 只能整数 -->
<el-input v-input.int v-model="input"></el-input>
<!-- 浮点型后面限制2位 -->
<el-input v-input.float="2" v-model="input"></el-input>
<!-- 只能英文 -->
<el-input v-input.alp v-model="input"></el-input>
html版本
1先建一个input.js文件放入以下代码
function input(el, bindings) {
const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;
input.addEventListener('compositionstart', () => {
vnode.locking = true //解决中文输入双向绑定失效
})
input.addEventListener('compositionend', () => {
vnode.locking = false //解决中文输入双向绑定失效
input.dispatchEvent(new Event('input'))
})
//输入监听处理
input.onkeyup = () => {
// v-input="'num'"
if (bindings.value == 'num') { //只能输入数字开头可以多个0
onlyNum(input);
}
//v-input="'num_point'"
else if (bindings.value == 'num_point') { //只能输入数字+小数点可以多个小数点
onlyNumPoint(input)
}
//v-input="'float'"
else if (bindings.value == 'float') { //只能输入浮点型只能一个小数点可以改变后面的数字改变保留几个小数点
onlyFloat(input, 1)
}
//v-input="'int'"
else if (bindings.value == 'int') { //只能输入整数0+正整数开头不能多个0
onlyInt(input)
}
//v-input="'intp'"
else if (bindings.value == 'intp') { //只能输入正整数
onlyIntp(input)
}
//v-input="'alp'"
else if (bindings.value == 'alp') { //只能输入字母
onlyAlp(input)
}
//v-input="'num_alp'"
else if (bindings.value == 'num_alp') { //只能输入数字+字母
onlyNumAlp(input)
}
//v-input="'arith'"
else if (bindings.value == 'arith') { //四则运算符+数字
onlyArith(input)
}
input.dispatchEvent(new Event("input"));
}
//数字
function onlyNum(input) {
input.value = input.value.replace(/\D+/g, '');
}
//整数(0+正整数)
function onlyInt(input) {
let value = input.value;
value = value.replace(/\D+/g, '');
input.value = value ? Number(value).toString() : value //去掉开头多个0
}
//正整数
function onlyIntp(input) {
if (!/^[1-9][0-9]*$/.test(input.value)) {
let value = input.value.replace(/\D+/g, '');
if (value && value.substring(0, 1) === '0') { //0开头去除0
value = value.substring(1)
}
input.value = value
}
}
//数字+小数点
function onlyNumPoint(input) {
input.value = input.value.replace(/[^\d.]/g, "");
}
//浮点型
// eslint-disable-next-line no-unused-vars
function onlyFloat(input, n) {
let value = input.value;
value = value.replace(/[^\d.]/g, '');
value = value.replace(/^\./g, '');
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
if (n && Number(n) > 0) { //限制n位
var d = new Array(Number(n)).fill(`\\d`).join('');
// eslint-disable-next-line no-useless-escape
var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');
value = value.replace(reg, '$1$2.$3')
}
if (value && !value.includes('.')) {
value = Number(value).toString() //去掉开头多个0
}
input.value = value
}
//字母
function onlyAlp(input) {
input.value = input.value.replace(/[^A-Za-z]/g, '');
}
//数字+字母
function onlyNumAlp(input) {
input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
}
//四则运算+-*/()数字
function onlyArith(input) {
let value = input.value
if (value) {
input.value = value.split('').reduce((prev, cur) => {
// eslint-disable-next-line no-useless-escape
if (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {
return prev + cur
}
return prev
}, '')
}
}
}
2去页面引入js文件
<script type="text/javascript" src="./input.js"></script>
3注册自定义指令
这里directives是和datamethods同级的。
directives: {
input
},
4页面使用
后面的num是字符串类型的区分你要限制什么
<el-input v-model="info" size="small" placeholder="请输入内容" v-input="'num'"></el-input>
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |