配合element-ui,el-form校验经纬度

1,688 阅读1分钟

1.1 校验经度

    var validatelongitude = (rule, value, callback) => { // 校验经度
      const reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
      if (value !== '' && value !== null && value !== undefined) {
        if (!reg.test(value)) {
          callback(new Error('经度整数部分为0-180,小数部分为0到6位!'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }

1.2 校验纬度

    var validatelatitude = (rule, value, callback) => { // 校验纬度
      const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/
      if (value !== '' && value !== null && value !== undefined) {
        if (!reg.test(value)) {
          callback(new Error('纬度整数部分为0-90,小数部分为0到6位!'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
2. 书写位置

vue项目中的data下面,return{}的上方。如图: image.png

3. 配合element-ui中的form表单rules验证一起使用

      rules: {
        holdRatio: [{ required: false }, { validator: validateNumber, trigger: 'blur' }], // 蓝德持股(%)
        longitude: [{ required: false }, { validator: validatelongitude, trigger: 'blur' }], // 经度
        latitude: [{ required: false }, { validator: validatelatitude, trigger: 'blur' }] // 纬度
      }
ps:需要设置的rules属性。以及需要设置prop属性,不熟悉的可以去element官网查看学习
// 这里的:rules属性就是代表使用上面定义的rules变量
<el-form ref="ruleForm" :model="company_form" :rules="rules" label-width="120px" class="company_form">

<el-form-item label="xxxx" prop="holdRatio">

当然,还要设置提交校验

    // 提交按钮
    saveCompony(formName) { // 保存按钮
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEditBtn) {
            xxxx。。。
          } else {
            this.company_form.enEntInfoId = 0
          }
          this.componySave(this.company_form) // 产业公司保存
        } else {
          return false
        }
      })
    },