限制el-input输入框的内容（1）不能输特殊字符（2）只能输纯数字（3）校验IP地址（4）校验经纬度

1.限制el-input不能输入特殊字符，不能超过15字符

<el-input
  :value="name"
  @input="e => form.name = validSe(e)"
  maxlength="15"
  placeholder="请输入名称"></el-input>

import Vue from "vue"
//限制计划名称不能输入特殊符号、不能超过15个字符
Vue.prototype.validSe = function (value, number = 255) {
        value = value.replace(/[`～*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "");
        if (value.length >= number) {
            this.$message({
                type: "warning",
                message: `输入内容不能超过${number}个字符`
            });
        }
        return value;
    };

2.限制el-input输入框只能输入20位的纯数字

<el-input title="只能输入不超过20位的纯数字" v-model="deviceInfo.deviceID" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="20" placeholder="请输入设备编号"></el-input>

rules中设置

deviceID:[{ required: true, message: '设备编号不能为空', trigger: 'change' }, { validator: deviceID, trigger: 'blur' }],

var deviceID = (rule,value,callback)=>{
                if(value.length<=20){
                    callback()
                }else{
                    callback(new Error('编号不能超过20位'))
                }
            };

只能输入数字、小数

<el-input v-model="info.involvedMoney" placeholder="请输入金额" type="text" onkeyup="value=value.replace(/[^0-9.]/g,'')"></el-input>

或

<el-input v-model="info.involvedMoney" placeholder="请输入损失金额" type="text" onkeyup="value=value.replace(/[^\d,.]/g,'')"></el-input>

3.校验IP地址

<el-input v-model="deviceInfo.IP" placeholder="请输入设备IP"></el-input>

IP:[{ required: true, message: 'IP不能为空', trigger: 'change' }, { validator: checkoutIP, trigger: 'change' }],

var checkoutIP= (rule,value,callback)=>{
                const ipRules = /^((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9]))$/
                if(!ipRules.test(value)){callback(new Error('ip不合法'))
                }else{
                    callback()
                }
            };

4. 校验经纬度

<el-form-item prop="longitude">
     <a slot="label">经度</a>
     <el-input v-model="deviceInfo.longitude" placeholder="请输入经度"></el-input>
</el-form-item>
<el-form-item prop="latitude">
     <a slot="label">纬度</a>
     <el-input v-model="deviceInfo.latitude" placeholder="请输入纬度"></el-input>
</el-form-item>

longitude:[{ validator: checkLong, trigger: 'change' }],
latitude:[{ validator: checkLat, trigger: 'change' }],

			//经度
            var checkLong = (rule,value,callback)=>{
                // const longrg = /^(\-|\+)?(((\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)$/;
                const longrg = /^[-+]?(((0|1?[0-7]?[0-9]?)|([1-9]?[0-9]?))(([.][0-9]{1,15})?)|180(([.][0]{1,15})?))$/;
                if(value && !longrg.test(value)){
                    callback(new Error('经度整数部分为0-180,小数部分为0到15位!'))
                }
                callback()
            }
            //纬度
            var checkLat = (rule,value,callback)=>{
                // const latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
                const latreg = /^[-+]?([1-8]?\d(\.\d{1,15})?|90(\.0{1,15})?)$/;
                if(value && !latreg.test(value)){
                    callback(new Error('纬度整数部分为0-90,小数部分为0到15位!'))
                }
                callback()
            }