首页 > 其他分享 >vue element 常用正则

vue element 常用正则

时间:2023-10-23 16:23:08浏览次数:29  
标签:vue pattern 支持 element 正则 trigger blur message 小数

在vue项目中使用element的时候,经常会用到的一些正则验证。

export default {
  textChecked: {
    pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{0,50}$/,
    message: '最多可输入50位字符,仅支持数字、英文大小写、中文',
    trigger: 'blur'
  },
  textCheckedAll: {
    pattern: /^[\\.!@#\\$%\\\\^&\\*\\)\\(\\+=\\{\\}\\[\]\\/",'<>~\\·`\\?:;|\u4e00-\u9fa5a-zA-Z0-9]{0,50}$/,
    message: '最多可输入50位字符,仅支持数字、英文大小写/符号、中文',
    trigger: 'blur'
  },
  phone: {
    pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
    message: '请输入正确手机号码',
    trigger: 'blur'
  },
  positiveInteger: {
    pattern: /^\+?[0-9]\d*$/,
    message: '请输入正整数',
    trigger: 'blur'
  },
  number: {
    pattern: /^\d+$/,
    message: '仅支持数字',
    trigger: 'blur'
  },
  case: {
    pattern: /^[A-Za-z]+$/,
    message: '仅支持英文大小写',
    trigger: 'blur'
  },
  symbolE: {
    pattern: /^[\\.!@#\\$%\\\\^&\\*\\)\\(\\+=\\{\\}\\[\]\\/",'<>~\\·`\\?:;|]+$/,
    message: '仅支持英文符号',
    trigger: 'blur'
  },
  caseNumber: {
    pattern: /^[A-Za-z\d]+$/,
    message: '仅支持英文大小写 + 数字',
    trigger: 'blur'
  },
  caseSymbolE: {
    pattern: /^[\\.!@#\\$%\\\\^&\\*\\)\\(\\+=\\{\\}\\[\]\\/",'<>~\\·`\\?:;|A-Za-z]+$/,
    message: '仅支持英文大小写 + 英文符号',
    trigger: 'blur'
  },
  numberSymbolE: {
    pattern: /^[\\.!@#\\$%\\\\^&\\*\\)\\(\\+=\\{\\}\\[\]\\/",'<>~\\·`\\?:;|\d]+$/,
    message: '仅支持数字 + 英文符号',
    trigger: 'blur'
  },
  caseNumberSymbolE: {
    pattern: /^[\\.!@#\\$%\\\\^&\\*\\)\\(\\+=\\{\\}\\[\]\\/",'<>~\\·`\\?:;|A-Za-z\d]+$/,
    message: '仅支持英文大小写 + 数字 + 英文符号',
    trigger: 'blur'
  },
  twoDecimal: {
    pattern: /^[0-9]+(\.[0-9]{0,2})?$/,
    message: '仅支持数字,且最多支持两位小数',
    trigger: 'blur'
  },
  ThreeDecimal: {
    pattern: /^[0-9]+(\.[0-9]{0,3})?$/,
    message: '仅支持数字,且最多支持三位小数',
    trigger: 'blur'
  },
  sixDecimal: {
    pattern: /^[0-9]+(\.[0-9]{0,6})?$/,
    message: '仅支持数字,且最多支持六位小数',
    trigger: 'blur'
  },
  tenDecimal: {
    pattern: /^(([0-9]?(\.\d{1,2})?)|10|10*(\.(0|00)))$/,
    message: '仅支持0~10的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  hundredsDecimal: {
    pattern: /^(([1-9]?\d(\.\d{1,2})?)|100|100*(\.(0|00)))$/,
    message: '仅支持0~100的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  kilobitDecimal: {
    pattern: /^(([1-9]?\d{1,2}(\.\d{1,2})?)|1000|1000*(\.(0|00)))$/,
    message: '仅支持0~1000的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  OneTfiveH: {
    pattern: /^(([1-9]?\d{1,2}(\.\d{1,2})?)|1500|1500*(\.(0|00)))$/,
    message: '仅支持0~1500的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  tenThousandDecimal: {
    pattern: /^(([1-9]?\d{1,3}(\.\d{1,2})?)|10000|10000*(\.(0|00)))$/,
    message: '仅支持0~10000的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  oneBillion: {
    pattern: /^(([1-9]?\d{1,8}(\.\d{1,2})?)|1000000000|1000000000*(\.(0|00)))$/,
    message: '仅支持0~1000000000的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  signHundreds: {
    pattern: /^(([-]?[1-9]?\d(\.\d{1,2})?)|[-]?100|[-]?100*(\.(0|00)))$/,
    message: '仅支持-100~100的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  signOneHundredThousand: {
    pattern: /^(([-]?[1-9]?\d{1,4}(\.\d{1,2})?)|[-]?100000|[-]?100000*(\.(0|00)))$/,
    message: '仅支持-100000~100000的数字,且最多支持两位小数',
    trigger: 'blur'
  },
  signKilobit: {
    pattern: /^(([-]?[1-9]?\d{1,2}(\.\d{1,2})?)|[-]?1000|[-]?1000*(\.(0|00)))$/,
    message: '仅支持-1000~1000的数字,且最多支持两位小数',
    trigger: 'blur'
  }
}


标签:vue,pattern,支持,element,正则,trigger,blur,message,小数
From: https://www.cnblogs.com/Cxymds/p/17782741.html

相关文章

  • Vue实现当前页面刷新的方法
    1.使用location.reload()方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。需要注意的是,该方法会重新加载整个页面,如果想要对页面局部进行刷新,可以考虑使用Vue自身的一些特性,比如通过设置组件的key属性实现组件的更新,或者通过......
  • 在Delphi中使用正则表达式校验中文姓名
    usessystem.RegularExpressions;functionIsChineseName(constaName:string;constaMaxLength:Integer=10):Boolean;beginvarPattern:='^[\x{4E00}-\x{9FA5}]{2,'+aMaxLength.ToString+'}(·[\x{4E00}-\x{9FA5}]{2,'+aMaxLength.ToString......
  • R : 使用正则表达式提取属水平的名称
    setwd("C:\\Users\\Administrator\\Desktop")#读取txt文件microbial_names<-readLines("your_input_file.txt")#使用正则表达式提取属水平的名称genus_names<-sapply(microbial_names,function(name){matches<-regmatches(name,regexpr(&q......
  • vue2 el-input-number 千分位显示的支持(不影响v-model的数值取值)
    <!--增加v-thousands指令--><el-input-numberv-model="row.money"v-thousands:controls="false":min="0":precision="2"style="width:100%"//添加全局指令或局部指令directives:......
  • 使用Matcher进行正则匹配-解析模板参数
    一、介绍Matcher是正则表达式的一部分,它用于执行正则表达式的匹配操作。Matcher通常与Pattern类一起使用,Pattern用于编译正则表达式,而Matcher用于在文本中搜索和匹配该正则表达式。二、具体用途1)文本匹配:可以使用 Matcher 来查找文本中是否包含与正则表达式模式匹配的子字符......
  • 如何在 Vue.js 中引入原子设计?
    本文为翻译文章,原文链接:https://medium.com/@9haroon_dev/introducing-atomic-design-in-vue-js-a9e873637a3e前言原子设计是一种创建设计系统的方法,它将用户界面分解为可重用的小组件,即:Atoms原子Molecules分子Organisms生物体Templates模板Pages页面通过遵循模......
  • 一台云服务器一个域名下,如何运行多个JAVA后端项目和多个VUE前端项目
    拿若依前后端分离版项目举例:修改前端代码ruoyi-ui/vue.config.js//二级目录名称ruoyi-uipublicPath:'/ruoyi-ui/',ruoyi-ui/src/router/index.jsexportdefaultnewRouter({mode:'history',//去掉url中的#base:'/ruoyi-ui/',//二级目录路径scrollBehavior:......
  • [Vue]计算属性computed
    计算属性:  1.定义:要用的属性不存在,要通过已有属性计算得来。   2.原理:底层借助了Objcet.defineProperty方法提供的getter和setter。   3.get函数什么时候执行?      (1).初次读取时会执行一次。      (2).当依赖的数据发生改变......
  • Vue3.0 中使用 wangEditor 富文本编辑器
    当使用Vue3.0版本时,wangEditor的使用方法略有不同。以下是在Vue3.0中使用wangEditor富文本编辑器的示例代码:```<template> <div>  <divref="editorContainer"></div>  <button@click="saveContent">保存</button> </div></template&......
  • Vue.js框架:vue3版本父子组件之间的传值和事件触发
    一、子组件使用vue3官方提供的setup语法糖中给出的defineEmits、defineProps来定义父子间的传参值和关联方法(useContext在3.2版本之后已去除)。<scriptsetuplang="ts">import{defineProps,defineEmits}from'vue'constemitEvents=defineEmits(['so......