vue+elmentUI项目的正则判断
一、为了方便重复利用管理,我创建一个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项目的正则判断的更多相关文章
- vue js 手写 正则判断 手机号码 和 密码
const phoneOrEmails = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ if(this.ruleForms.phoneOrEmail == ...
- 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码
今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- vue ssr 项目改造经历
vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...
- 使用vue做项目如何提高代码效率
最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...
- vue使用vue-router beforEach实现判断用户登录跳转路由筛选
vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- vue新建项目
一直都被如何用vue.js新建一个项目的问题困扰着,经过好久的实践,终于搞清楚如何用vue新建项目了: 1.官网对于vue-cli介绍: Vue.js provides an official CLI ...
- Vue.jsbrowserify项目模板
Vue.js——60分钟browserify项目模板快速入门 概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...
随机推荐
- 初级知识点一——C#中的值类型与引用类型
从C#语言的定义中可以知道,C#支持两种值类型,分别是 值类型和引用类型,那么两者的区别到底在哪儿呢? 值类型特点: 1. 值类型包含 a 预定义的值类型 b 用户自定义的值类型(struct) 2. ...
- wpf之DataGrid绑定DataTable,其中DataGridComboBoxColumn双向绑定枚举enum
百度了快一天,没结果,除了几个原创的,都是复制粘贴的内容. 不想用别的笨办法,于是脑洞大开,想出了我的办法. 首先是前台代码,与网上的比较类似: xmlns:jz="clr-namespac ...
- vue mixin混入
基本结构 export default { data() { return {} }, computed: { }, methods: { }, filters: { }, created() { } ...
- Ajxax技术-1
1.什么是Ajax Ajax: Asynchronous javascript and xml (异步javascript和xml). ==Ajax并不是一种新技术,而是已有技术的集合.JavaScr ...
- 局域网内笔记本分屏到android手机上
前提 笔记本电脑1台 安卓/ios手机1部 局域网 spacedesk 预览 参考: https://www.appinn.com/spacedesk https://spacedesk.net/de ...
- jmeter连数据库
前提:jmeter不能直接连数据库,需要导入一个jar包 步骤: 1.右键线程组--添加--配置元件--JDBC Connection Configuration 2.jdbc的基本配置:可以修改jd ...
- python操作从数据库中获取数据的接口
1.输入一个表名,获取表里面的数据 2.判断用户是否存在,如果不存在就添加到数据库里面
- python中的锁lock=threading.Lock()
避免多个线程保卫同一块数据的时候,产生错误,所以加锁来防止这种问题 个人理解:当打印结果是交替打印时,但是如果需求是需要打印完一个线程的内容后,再去打印另一个线程的内容,就需要用到锁 不加锁打印结果: ...
- [LeetCode]494. 目标和、416. 分割等和子集(0-1背包,DP)
题目一 494. 目标和 给定一个非负整数数组,a1, a2, ..., an, 和一个目标数,S.现在你有两个符号 + 和 -.对于数组中的任意一个整数,你都可以从 + 或 -中选择一个符号添加在前 ...
- 将ImageMagic库编译进nginx
1.首先要将ImageMagick库的相应头文件加到环境变量中 export C_INCLUDE_PATH=$C_INCLUDE_PATH:/usr/local/ImageMagick/include ...