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>