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{}的上方。如图:
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
}
})
},