Preface
I often encounter input boxes that need to be restricted to numbers.
Because the user is outrageous and insists on entering English or Chinese where numbers are clearly entered
But it’s troublesome to use the UI framework or write your own methods to verify the form
It’s troublesome to do a verification specifically for an input box
So it’s integrated here. Two ways of customizing instructions are more convenient to use
There are both vue and html versions.
How to write custom instructions for vue version
1. Make an input.js file and copy the following code
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. Register custom instructions
import input from "./input.js";
export default{
install:Vue=>{
Vue.directive('input',input)
}
}
3, global registration method
main.js
import inputDirective from './directive/input/install';
Vue.use( inputDirective );
4. Page usage
<!-- 只能数字 -->
<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 version
1. First create an input.js file and put the following code in it
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. Go to the page and import the js file
<script type="text/javascript" src="./input.js"></script>
3, register custom instructions
The directives here are at the same level as data and methods.
directives: {
input
},
4, page usage
The following num is of string type, to distinguish what you want to restrict
<el-input v-model="info" size="small" placeholder="请输入内容" v-input="'num'"></el-input>