1.1 Longitude verification
var validatelongitude = (rule, value, callback) = > { // Check longitude
const reg = / ^ (\ | \ +)? (((\ d | \ [1-9] d | 1 [0] \ d {1, 3}) | 0 \. \ d {0, 6}) | | (\ d \ d [1-9] 1 [0] \ | d | 0 {1, 3}) | 180 \. 0 {0, 6} | 180) $/
if(value ! = =' '&& value ! = =null&& value ! = =undefined) {
if(! reg.test(value)) { callback(new Error(The longitude integer part is 0 to 180, and the decimal part is 0 to 6 digits! '))}else {
callback()
}
} else {
callback()
}
}
Copy the code
1.2 Latitude Verification
var validatelatitude = (rule, value, callback) = > { // Check latitude
const reg = / ^ (\ | \ +)? ([0 to 8]? \ d {1} \ \ d {0, 6} \ | 90. 0 {0, 6} | 0 to 8]? \d{1}|90)$/
if(value ! = =' '&& value ! = =null&& value ! = =undefined) {
if(! reg.test(value)) { callback(new Error('Latitude integer parts are 0 to 90 and decimal parts are 0 to 6 places! '))}else {
callback()
}
} else {
callback()
}
}
Copy the code
2. Writing position
Below data in the vue project, above return{}. As shown in figure:
3. Use with the Form rules validation in Element-UI
rules: {
holdRatio: [{ required: false }, { validator: validateNumber, trigger: 'blur'}].// Lande Shareholding (%)
longitude: [{ required: false }, { validator: validatelongitude, trigger: 'blur'}]./ / longitude
latitude: [{ required: false }, { validator: validatelatitude, trigger: 'blur' }] / / latitude
}
Copy the code
Ps: The rules property needs to be set. If you’re not familiar with it, check out Element’s website
// The :rules attribute represents the use of the rules variable defined above
<el-form ref="ruleForm" :model="company_form" :rules="rules" label-width="120px" class="company_form">
<el-form-item label="xxxx" prop="holdRatio">
Copy the code
And, of course, set up the commit validation
// Submit button
saveCompony(formName) { // Save the button
this.$refs[formName].validate((valid) = > {
if (valid) {
if (this.isEditBtn) {XXXX... }else {
this.company_form.enEntInfoId = 0
}
this.componySave(this.company_form) // Industry company save
} else {
return false}})},Copy the code