Foreword
We often encounter input boxes that need to be restricted to numbers.
Because the user is outrageous, he insists on entering English or Chinese where the numbers are clearly entered.
However, it is more troublesome to use the UI framework or write your own methods to verify the form.
It is very troublesome to create a verification specifically for an input box.
Therefore, two ways of customizing instructions are integrated here to make it more convenient to use.
Both vue version and html version are available.
How to write vue version custom instructions
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//Solve the failure of Chinese input two-way binding
})
input.addEventListener('compositionend', () => {<!-- -->
vnode.locking = false//Solve the failure of two-way binding of Chinese input
input.dispatchEvent(new Event('input'))
})
//Input monitoring processing
input.onkeyup = () => {<!-- -->
if (vnode.locking) {<!-- -->
return;
}
// v-input.num
if (binding.modifiers.num) {<!-- -->//Only numbers can be entered (can have multiple 0s at the beginning)
onlyNum(input);
}
//v-input.num_point
else if (binding.modifiers.num_point) {<!-- -->//Only numbers + decimal points can be entered (multiple decimal points are allowed)
onlyNumPoint(input)
}
//v-input.float
else if (binding.modifiers.float) {<!-- -->//Only floating point types can be entered (only one decimal point)
onlyFloat(input, binding.value)
}
// v-input.int
else if (binding.modifiers.int) {<!-- -->//Only integers (0 + positive integers) can be entered (no more than 0 at the beginning)
onlyInt(input)
}
//v-input.intp
else if (binding.modifiers.intp) {<!-- -->//Only positive integers can be entered
onlyIntp(input)
}
//v-input.alp
else if (binding.modifiers.alp) {<!-- -->//Only letters can be entered
onlyAlp(input)
}
//v-input.num_alp
else if (binding.modifiers.num_alp) {<!-- -->//Only numbers + letters can be entered
onlyNumAlp(input)
}
//v-input.arith
else if (binding.modifiers.arith) {<!-- -->//Four arithmetic operators + numbers
onlyArith(input)
}
input.dispatchEvent(new Event("input"));
}
//number
function onlyNum(input) {<!-- -->
input.value = input.value.replace(/\D + /g, '');
}
//Integer (0 + positive integer)
function onlyInt(input) {<!-- -->
let value = input.value;
value = value.replace(/\D + /g, '');
input.value = value ? Number(value).toString() : value//Remove multiple 0s at the beginning
}
//Positive integer
function onlyIntp(input) {<!-- -->
if (!/^[1-9][0-9]*$/.test(input.value)) {<!-- -->
let value = input.value.replace(/\D + /g, '');
if (value & amp; & amp; value.substring(0, 1) === '0') {<!-- -->//Remove 0 at the beginning of 0
value = value.substring(1)
}
input.value = value
}
}
//number + decimal point
function onlyNumPoint(input) {<!-- -->
input.value = input.value.replace(/[^\d.]/g, "");
}
//Floating point type
// 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 & amp; & amp;Number(n)>0) {<!-- -->//limit n bits
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 & amp; & amp; !value.includes('.')) {<!-- -->
value = Number(value).toString()//Remove multiple 0s at the beginning
}
input.value = value
}
//letter
function onlyAlp(input) {<!-- -->
input.value = input.value.replace(/[^A-Za-z]/g, '');
}
//number + letter
function onlyNumAlp(input) {<!-- -->
input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
}
//Four arithmetic operations + -*/() numbers
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
<!-- Only numbers -->
<el-input v-input.num v-model="input"></el-input>
<!-- Only numbers + decimal points -->
<el-input v-input.num_point v-model="input"></el-input>
<!-- Only integers -->
<el-input v-input.int v-model="input"></el-input>
<!-- Floating point type is limited to 2 digits after -->
<el-input v-input.float="2" v-model="input"></el-input>
<!-- English only -->
<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 //Solve the failure of Chinese input two-way binding
})
input.addEventListener('compositionend', () => {<!-- -->
vnode.locking = false //Solve the failure of Chinese input two-way binding
input.dispatchEvent(new Event('input'))
})
//Input monitoring processing
input.onkeyup = () => {<!-- -->
// v-input="'num'"
if (bindings.value == 'num') {<!-- --> //Only numbers can be entered (can have multiple 0s at the beginning)
onlyNum(input);
}
//v-input="'num_point'"
else if (bindings.value == 'num_point') {<!-- --> //Only numbers + decimal points can be entered (multiple decimal points are allowed)
onlyNumPoint(input)
}
//v-input="'float'"
else if (bindings.value == 'float') {<!-- --> //Only floating point types can be entered (only one decimal point). You can change the following numbers to change how many decimal points are retained.
onlyFloat(input, 1)
}
//v-input="'int'"
else if (bindings.value == 'int') {<!-- --> //Only integers (0 + positive integers) can be entered (no more than 0 at the beginning)
onlyInt(input)
}
//v-input="'intp'"
else if (bindings.value == 'intp') {<!-- --> //Only positive integers can be entered
onlyIntp(input)
}
//v-input="'alp'"
else if (bindings.value == 'alp') {<!-- --> //Only letters can be entered
onlyAlp(input)
}
//v-input="'num_alp'"
else if (bindings.value == 'num_alp') {<!-- --> //Only numbers + letters can be entered
onlyNumAlp(input)
}
//v-input="'arith'"
else if (bindings.value == 'arith') {<!-- --> //Four arithmetic operators + numbers
onlyArith(input)
}
input.dispatchEvent(new Event("input"));
}
//number
function onlyNum(input) {<!-- -->
input.value = input.value.replace(/\D + /g, '');
}
//Integer (0 + positive integer)
function onlyInt(input) {<!-- -->
let value = input.value;
value = value.replace(/\D + /g, '');
input.value = value ? Number(value).toString() : value //Remove multiple leading 0s
}
//Positive integer
function onlyIntp(input) {<!-- -->
if (!/^[1-9][0-9]*$/.test(input.value)) {<!-- -->
let value = input.value.replace(/\D + /g, '');
if (value & amp; & amp; value.substring(0, 1) === '0') {<!-- --> //Remove 0 at the beginning of 0
value = value.substring(1)
}
input.value = value
}
}
//number + decimal point
function onlyNumPoint(input) {<!-- -->
input.value = input.value.replace(/[^\d.]/g, "");
}
//Floating point type
// 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 & amp; & amp; Number(n) > 0) {<!-- --> //limit n bits
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 & amp; & amp; !value.includes('.')) {<!-- -->
value = Number(value).toString() //Remove multiple leading 0s
}
input.value = value
}
//letter
function onlyAlp(input) {<!-- -->
input.value = input.value.replace(/[^A-Za-z]/g, '');
}
//Numbers + letters
function onlyNumAlp(input) {<!-- -->
input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
}
//Four arithmetic operations + -*/() numbers
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
Here directives are at the same level as data and methods.
directives: {<!-- -->
input
},
4. Page usage
The following num is of string type, which distinguishes what you want to restrict.
<el-input v-model="info" size="small" placeholder="Please enter the content" v-input="'num'"></el- input>