zoukankan      html  css  js  c++  java
  • vue3项目中常用表单验证挂载到vue实例

    // 表单验证
    export default {
      install: function(Vue) {
        // 空验证
        Vue.config.globalProperties.check_null = function(txt) {
          return txt == '' ? true : /^[ ]+$/g.test(txt)
        }
        // 手机验证
        Vue.config.globalProperties.check_phone = function(txt) {
          return /^(1d{10})$/g.test(txt)
        }
        // 检测固话号码
        Vue.config.globalProperties.check_tele = function(txt) {
          return /^((0d{2,3}-d{7,8}))$/g.test(txt)
        }
        // 检测手机和固话
        Vue.config.globalProperties.check_telephone = function(txt) {
          return /^((0d{2,3}-d{7,8})|(1d{10}))$/g.test(txt)
        }
        // 邮箱验证
        Vue.config.globalProperties.check_email = function(txt) {
          return /^[w!#$%&'*+/=?^_`{|}~-]+(?:.[w!#$%&'*+/=?^_`{|}~-]+)*@(?:[w](?:[w-]*[w])?.)+[w](?:[w-]*[w])?$/g.test(
            txt
          )
        }
        // 检测身份证
        Vue.config.globalProperties.check_idcard = function(txt) {
          return /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/g.test(txt)
        }
        // 检测姓名
        // Vue.config.globalProperties.check_name = function(txt) {
        //   return /^[a-zA-Zu4e00-u9fa5\_-.·]*$/g.test(txt)
        // }
        // 检测姓名(中文)
        // Vue.config.globalProperties.check_cn_name = function(txt) {
        //   return /^[u4e00-u9fa5.·]*$/g.test(txt)
        // }
        // 检测姓名(英文)
        // Vue.config.globalProperties.check_en_name = function(txt) {
        //   return /^[a-zA-Z\_-.·]*$/g.test(txt)
        // }
        // 检测用户名(长度在3~16之间,只能包含英文、数字和下划线,区分大小写)
        Vue.config.globalProperties.check_username = function(txt) {
          return /^[a-zA-Z0-9_-]{3,16}$/g.test(txt)
        }
        // 密码验证(以字母开头,长度在6~18之间,只能包含字符、数字和下划线,区分大小写)
        Vue.config.globalProperties.check_password = function(txt) {
          return /^[a-zA-Z]w{5,17}$/g.test(txt)
        }
        // 检测url
        // Vue.config.globalProperties.check_url = function(txt) {
        //   return /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/g.test(txt)
        // }
        // 检测ip地址
        Vue.config.globalProperties.check_ip = function(txt) {
          return /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/g.test(
            txt
          )
        }
        // 金钱验证(两位小数)
        Vue.config.globalProperties.check_money = function(txt) {
          return /(^[1-9](d+)?(.d{1,2})?$)|(^(0){1}$)|(^d.d{1,2}?$)/g.test(txt)
        }
        // 整数
        Vue.config.globalProperties.check_int = function(txt) {
          return /(^[0-9]d*$)/g.test(txt)
        }
        // 正整数
        Vue.config.globalProperties.check_int2 = function(txt) {
          return /(^[1-9]d*$)/g.test(txt)
        }
        // emoji表情验证
        Vue.config.globalProperties.check_emoji = function(txt) {
          return /^([u00A9u00AEu203Cu2049u2122u2139u2194-u2199u21A9-u21AAu231A-u231Bu2328u23CFu23E9-u23F3u23F8-u23FAu24C2u25AA-u25ABu25B6u25C0u25FB-u25FEu2600-u2604u260Eu2611u2614-u2615u2618u261Du2620u2622-u2623u2626u262Au262E-u262Fu2638-u263Au2640u2642u2648-u2653u2660u2663u2665-u2666u2668u267Bu267Fu2692-u2697u2699u269B-u269Cu26A0-u26A1u26AA-u26ABu26B0-u26B1u26BD-u26BEu26C4-u26C5u26C8u26CE-u26CFu26D1u26D3-u26D4u26E9-u26EAu26F0-u26F5u26F7-u26FAu26FDu2702u2705u2708-u270Du270Fu2712u2714u2716u271Du2721u2728u2733-u2734u2744u2747u274Cu274Eu2753-u2755u2757u2763-u2764u2795-u2797u27A1u27B0u27BFu2934-u2935u2B05-u2B07u2B1B-u2B1Cu2B50u2B55u3030u303Du3297u3299]|uD83C[uDC04uDCCFuDD70-uDD71uDD7E-uDD7FuDD8EuDD91-uDD9AuDDE6-uDDFFuDE01-uDE02uDE1AuDE2FuDE32-uDE3AuDE50-uDE51uDF00-uDF21uDF24-uDF93uDF96-uDF97uDF99-uDF9BuDF9E-uDFF0uDFF3-uDFF5uDFF7-uDFFF])|(uD83D[uDC00-uDCFDuDCFF-uDD3DuDD49-uDD4EuDD50-uDD67uDD6F-uDD70uDD73-uDD7AuDD87uDD8A-uDD8DuDD90uDD95-uDD96uDDA4-uDDA5uDDA8uDDB1-uDDB2uDDBCuDDC2-uDDC4uDDD1-uDDD3uDDDC-uDDDEuDDE1uDDE3uDDE8uDDEFuDDF3uDDFA-uDE4FuDE80-uDEC5uDECB-uDED2uDEE0-uDEE5uDEE9uDEEB-uDEECuDEF0uDEF3-uDEF6])|(uD83E[uDD10-uDD1EuDD20-uDD27uDD30uDD33-uDD3AuDD3C-uDD3EuDD40-uDD45uDD47-uDD4BuDD50-uDD5EuDD80-uDD91uDDC0])$/g.test(
            txt
          )
        }
        // 隐藏手机号
        Vue.config.globalProperties.phoneChang = function(txt) {
          return txt.toString().replace(/^(d{3})(d{4})(d{4})$/, '$1****$3')
        }
        // 替换表单的前后空格
        Vue.config.globalProperties.trim = function(txt) {
          return txt.replace(/(^s*)|(s*$)/g, '')
        }
        // 身份证位数
        Vue.config.globalProperties.idcardNumTest = function(txt) {
          return txt.toString().length == 15 || txt.toString().length == 18 ? true : false
        }
        // /n替换成br
        Vue.config.globalProperties.NToBr = function(txt) {
          return txt.replace(/
    /g, '<br>')
        }
    // br替换成/n Vue.config.globalProperties.BrToN = function(txt) { return txt.replace(/<br>/g,
    ' ') } // 验证码 Vue.config.globalProperties.setTime = function(that) { if (that.phonecode.phoneFlag === 0) { // 界面倒计时 that.phonecode.time = 60 that.phonecode.phoneFlag = 1 that.phonecode.phoneText = that.phonecode.time + 's' var times = setInterval(function() { if (--that.phonecode.time !== 0) { that.phonecode.phoneText = that.phonecode.time + 's' } else { clearInterval(times) // that.time = 3 that.phonecode.phoneText = '重新发送' that.phonecode.phoneFlag = 0 } }, 1000) that.phonecode.oldPhone = that.phone // 记录现时的手机号 } } }, }

    在main.js中引用即可

    import formcheck from './utils/formcheck'
    const app = createApp(App)
    app.config.globalProperties.http = () => {
      console.log('i am http')
    }
    app
      .use(formcheck)
      .mount('#app')

    组件内使用

    const { proxy} = getCurrentInstance();
    console.log(proxy.check_null("aaaaaaa"));//true
  • 相关阅读:
    geoserver发布地图服务WMTS
    geoserver发布地图服务WMS
    geoserver安装部署步骤
    arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
    arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
    cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)
    arcgis api 3.x for js 入门开发系列十二地图打印GP服务(附源码下载)
    arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
    arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)
    arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
  • 原文地址:https://www.cnblogs.com/yixiancheng/p/15011392.html
Copyright © 2011-2022 走看看