vue3进阶(二)-封装utils方法——禁止输入框特殊字符校验 & form表单特定字符校验 & 自定义指令app.directive之防抖指令v-throttle

vue3进阶(二)-封装utils方法——禁止输入框特殊字符校验 & form表单特定字符校验 & 自定义指令app.directive之防抖指令v-throttle

4、引用的校验方法

src\utils\validate.ts

// 禁止输入框特殊字符校验  export function replaceCommonText(e: any) { 
    if (!checkSpecificKeyWord(e)) { 
    // 提交关键字 ElMessage({ 
    message: '不能包含关键词： ' + wordKey, type: 'warning', }) const y = e.replace(wordKey, '') return y } else { 
    const str = e.replace( /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“” ]/g, '' ) const y = str.replace(/\s+/g, '') return y } } / * @description form表单特定字符校验 * @param value * @returns {boolean} */ export function validateCommonText(rule: any, value: any, callback: any) { 
    const noChars = "[`~!#$^&*\"()=|{}': ; ',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'@ /%" const v = value || '' for (let i = 0; i < noChars.length; i++) { 
    const char = noChars[i] if (v.indexOf(char) != -1) { 
    callback(new Error('不能使用特殊字符')) return } } 

使用教程

特殊字符校验

1. 介绍：输入框禁止输入特殊字符

第一步引入：

import { replaceCommonText } from '@src/utils/validate' 

第二步页面应用：

<el-input v-model.trim="formInline.prjName" @input="(e) => (formInline.prjName = replaceCommonText(e))"/> 

2. 介绍：form 表单特殊字符验证

第一步引入：

import { 
    validateCommonText } from '@src/utils/validate' 

第二步在 rules 校验中用法：

 { 
    validator: validateCommonText, trigger: 'blur' }, 

公共方法

全局防抖 - 添加防抖指令

<el-button v-throttle="3000" > 保存 </el-button> 

防抖方法

library\plugins\directive.ts

import type { 
    DirectiveBinding } from 'vue' export function setup(app: any) { 
    / * @description 自定义指令v-throttle */ app.directive('throttle', { 
    mounted(el: any, binding: DirectiveBinding) { 
    let { 
    throttleTime } = binding.value if (!throttleTime) { 
    throttleTime = 1000 } let timer: any let disable = false el.addEventListener( 'click', (event: any) => { 
    if (timer) { 
    clearTimeout(timer) } if (!disable) { 
    disable = true } else { 
    event && event.stopImmediatePropagation() } timer = setTimeout(() => { 
    timer = null disable = false }, throttleTime) }, true ) }, }) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10762.html