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
    }
  }

使用教程

特殊字符校验

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

第一步引入：

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

第二步页面应用：

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

介绍：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
      )
    },
  })
}