网站怎么做更新,互联网营销师培训教程,设计公司算什么企业,深圳做网站设计前言
经常遇到输入框需要限制只能输入数字的#xff0c; 因为用户很离谱#xff0c;明显输入数字的地方他非要输入英文或者中文 但是用到UI框架或者自己写方法验证表单比较麻烦 为了一个输入框专门去弄一个验证很麻烦 所以这里就整合了两种自定义指令的方式#xff0c;更加…前言
经常遇到输入框需要限制只能输入数字的 因为用户很离谱明显输入数字的地方他非要输入英文或者中文 但是用到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.numif (binding.modifiers.num) {//只能输入数字开头可以多个0onlyNum(input);}//v-input.num_pointelse if (binding.modifiers.num_point) {//只能输入数字小数点可以多个小数点onlyNumPoint(input)}//v-input.floatelse if (binding.modifiers.float) {//只能输入浮点型只能一个小数点onlyFloat(input, binding.value)}// v-input.intelse if (binding.modifiers.int) {//只能输入整数0正整数开头不能多个0onlyInt(input)}//v-input.intpelse if (binding.modifiers.intp) {//只能输入正整数onlyIntp(input)}//v-input.alpelse if (binding.modifiers.alp) {//只能输入字母onlyAlp(input)}//v-input.num_alpelse if (binding.modifiers.num_alp) {//只能输入数字字母onlyNumAlp(input)}//v-input.arithelse 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开头去除0value value.substring(1)}input.value value}}//数字小数点function onlyNumPoint(input) {input.value input.value.replace(/[^\d.]/g, );}//浮点型// eslint-disable-next-line no-unused-varsfunction onlyFloat(input, n) {let value input.value;value value.replace(/[^\d.]/g, );value value.replace(/^\./g, );value value.replace(., $#$).replace(/\./g, ).replace($#$, .);if (nNumber(n)0) {//限制n位var d new Array(Number(n)).fill(\\d).join();// eslint-disable-next-line no-useless-escapevar 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.valueif (value) {input.value value.split().reduce((prev, cur) {// eslint-disable-next-line no-useless-escapeif (/^[\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-modelinput/el-input!-- 只能数字小数点 --el-input v-input.num_point v-modelinput/el-input!-- 只能整数 --el-input v-input.int v-modelinput/el-input!-- 浮点型后面限制2位 --el-input v-input.float2 v-modelinput/el-input!-- 只能英文 --el-input v-input.alp v-modelinput/el-inputhtml版本
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-inputnumif (bindings.value num) { //只能输入数字开头可以多个0onlyNum(input);}//v-inputnum_pointelse if (bindings.value num_point) { //只能输入数字小数点可以多个小数点onlyNumPoint(input)}//v-inputfloatelse if (bindings.value float) { //只能输入浮点型只能一个小数点可以改变后面的数字改变保留几个小数点onlyFloat(input, 1)}//v-inputintelse if (bindings.value int) { //只能输入整数0正整数开头不能多个0onlyInt(input)}//v-inputintpelse if (bindings.value intp) { //只能输入正整数onlyIntp(input)}//v-inputalpelse if (bindings.value alp) { //只能输入字母onlyAlp(input)}//v-inputnum_alpelse if (bindings.value num_alp) { //只能输入数字字母onlyNumAlp(input)}//v-inputarithelse 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开头去除0value value.substring(1)}input.value value}}//数字小数点function onlyNumPoint(input) {input.value input.value.replace(/[^\d.]/g, );}//浮点型// eslint-disable-next-line no-unused-varsfunction 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-escapevar 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.valueif (value) {input.value value.split().reduce((prev, cur) {// eslint-disable-next-line no-useless-escapeif (/^[\d|\-|\|\*|\/|\.|\(|\)]$/.test(cur)) {return prev cur}return prev}, )}}
}
2去页面引入js文件
script typetext/javascript src./input.js/script3注册自定义指令 这里directives是和datamethods同级的。
directives: {input},4页面使用 后面的num是字符串类型的区分你要限制什么
el-input v-modelinfo sizesmall placeholder请输入内容 v-inputnum/el-input
