一、为了方便重复利用管理,我创建一个regExp.ts文件来管理正则的表达式,内容如下:

 1 /* eslint-disable */
2 const phoneNumberRegExp = /^[1|9][3|4|5|6|7|8|9][0-9]\d{8}$/
3 const passwordRegExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ // 6 - 12 位字母数字组合
4 const emailRegExp = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
5 const idCardRegExp = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
6 const longitudeRegExp=/^[\-\+]?(0(\.\d{1,10})?|([1-9](\d)?)(\.\d{1,10})?|1[0-7]\d{1}(\.\d{1,10})?|180\.0{1,10})$/ //经度
7 const latitudeRegExp=/^[\-\+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/ //纬度
8 export {
9 phoneNumberRegExp,
10 passwordRegExp,
11 emailRegExp,
12 idCardRegExp,
13 longitudeRegExp,
14 latitudeRegExp
15 }

二、在要使用的页面,引入上面的文件,如下:

 1 <script lang="ts">
2 import * as api from '@/utils/api/index'
3 import { Component, Vue } from 'vue-property-decorator'
4 import eHeader from '@/components/header.vue'
5 import { constants } from 'http2'
6 import * as util from '@/utils/util.ts' //这里就是引入的(regExp.ts)正则判断文件,和其他的工具类;
7
8 const testLongitude = (rule: any, value: string, callback: Function) => {
9 if (util.regExp.longitudeRegExp.test(value)) {
10 return callback()
11 } else {
12 return callback(new Error('请输入正确的经度'))
13 }
14 }
15 const testLatitude = (rule: any, value: string, callback: Function) => {
16 if (util.regExp.latitudeRegExp.test(value)) {
17 return callback()
18 } else {
19 return callback(new Error('请输入正确的纬度'))
20 }
21 }
22 @Component({
23 components: {
24 'Header': eHeader
25 }
26 })
27 export default class point extends Vue {
28
29
30 private rules = {
31 location: [
32 { required: true, message: '请输入接送点名称名称', trigger: 'blur' }
33 ],
34 longitude: [
35 { validator: testLongitude, trigger: 'blur' }
36 ],
37 latitude: [
38 { validator: testLatitude, trigger: 'blur' }
39 ]
40 }
41
42 mounted (){}
43 }

三、在el-form上加上 :rules="rules" ,还要在判断的字段 el-form-item 上加上 prop="form里的字段"

<el-form class="inline-form" :rules="rules" ref="formData" size="small" :model="formData">
<el-form-item label="" v-if="formData.type === 1" prop="longitude">
<el-input
:disabled="!ifFalg"
class="my-input"
clearable
v-model.number="formData.longitude"
placeholder="经度 "
>
</el-input>
</el-form-item>
</form>

vue+elmentUI项目的正则判断的更多相关文章

  1. vue js 手写 正则判断 手机号码 和 密码

    const phoneOrEmails = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/             if(this.ruleForms.phoneOrEmail  ==  ...

  2. 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码

    今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...

  3. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. vue ssr 项目改造经历

    vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...

  5. 使用vue做项目如何提高代码效率

    最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...

  6. vue使用vue-router beforEach实现判断用户登录跳转路由筛选

    vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...

  7. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  8. vue新建项目

    一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...

  9. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

随机推荐

  1. 初级知识点一——C#中的值类型与引用类型

    从C#语言的定义中可以知道,C#支持两种值类型,分别是 值类型和引用类型,那么两者的区别到底在哪儿呢? 值类型特点: 1. 值类型包含 a 预定义的值类型 b 用户自定义的值类型(struct) 2. ...

  2. wpf之DataGrid绑定DataTable,其中DataGridComboBoxColumn双向绑定枚举enum

    百度了快一天,没结果,除了几个原创的,都是复制粘贴的内容. 不想用别的笨办法,于是脑洞大开,想出了我的办法. 首先是前台代码,与网上的比较类似: xmlns:jz="clr-namespac ...

  3. vue mixin混入

    基本结构 export default { data() { return {} }, computed: { }, methods: { }, filters: { }, created() { } ...

  4. Ajxax技术-1

    1.什么是Ajax Ajax: Asynchronous javascript and xml (异步javascript和xml). ==Ajax并不是一种新技术,而是已有技术的集合.JavaScr ...

  5. 局域网内笔记本分屏到android手机上

    前提 笔记本电脑1台 安卓/ios手机1部 局域网 spacedesk 预览 参考: https://www.appinn.com/spacedesk https://spacedesk.net/de ...

  6. jmeter连数据库

    前提:jmeter不能直接连数据库,需要导入一个jar包 步骤: 1.右键线程组--添加--配置元件--JDBC Connection Configuration 2.jdbc的基本配置:可以修改jd ...

  7. python操作从数据库中获取数据的接口

    1.输入一个表名,获取表里面的数据 2.判断用户是否存在,如果不存在就添加到数据库里面

  8. python中的锁lock=threading.Lock()

    避免多个线程保卫同一块数据的时候,产生错误,所以加锁来防止这种问题 个人理解:当打印结果是交替打印时,但是如果需求是需要打印完一个线程的内容后,再去打印另一个线程的内容,就需要用到锁 不加锁打印结果: ...

  9. [LeetCode]494. 目标和、416. 分割等和子集(0-1背包,DP)

    题目一 494. 目标和 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在你有两个符号 + 和 -.对于数组中的任意一个整数,你都可以从 + 或 -中选择一个符号添加在前 ...

  10. 将ImageMagic库编译进nginx

    1.首先要将ImageMagick库的相应头文件加到环境变量中 export C_INCLUDE_PATH=$C_INCLUDE_PATH:/usr/local/ImageMagick/include ...