vue+elmentUI项目的正则判断

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

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

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

<script lang="ts">
import * as api from '@/utils/api/index'
import { Component, Vue } from 'vue-property-decorator'
import eHeader from '@/components/header.vue'
import { constants } from 'http2'
import * as util from '@/utils/util.ts'  //这里就是引入的（regExp.ts）正则判断文件，和其他的工具类；

const testLongitude = (rule: any, value: string, callback: Function) => {
  if (util.regExp.longitudeRegExp.test(value)) {
    return callback()
  } else {
    return callback(new Error('请输入正确的经度'))
  }
}
const testLatitude = (rule: any, value: string, callback: Function) => {
  if (util.regExp.latitudeRegExp.test(value)) {
    return callback()
  } else {
    return callback(new Error('请输入正确的纬度'))
  }
}
@Component({
  components: {
  'Header': eHeader
  }
  })
export default class point extends Vue {

     
 private rules = {
    location: [
      { required: true, message: '请输入接送点名称名称', trigger: 'blur' }
    ],
    longitude: [
      { validator: testLongitude, trigger: 'blur' }
    ],
    latitude: [
      { validator: testLatitude, trigger: 'blur' }
    ]
  }

    mounted (){}
 }

三、在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>