vue2+elementui表单手机号码、邮箱、经纬度、百分比验证

1.手机号码验证（验证方式写在一个公共js文件中，在对应组件中引入即可）

//方法一
/* 需传参，n为是否必填参数 */
export const isPhone = (n) => {   
    return [
        {
          required: n,
          message: "不能为空",
          trigger: "blur",
        },
        {
          pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          message: '请输入正确电话号码',
        },
      ];
}

//方法二
/* 不需要传参，直接使用即可 */
export const isPhone = (rule, value, callback) => {
    let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (value != "") {
        if (reg.test(value)) {
            callback();
        }else {
            callback('请输入正确联系方式')
        }
    } else {
        callback();
    }
}

2.邮箱验证（验证方式写在一个公共js文件中，在对应组件中引入即可）

//方法一
/* 不需要传参，直接引入使用即可 */
export const isEmail = (rule,value,callback) => {
    let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    if (value != "") {
        if (reg.test(value)) {
            callback()
        }else {
            callback('请输入正确邮箱')
        }
    }else {
        callback()
    }
}

//方法二
/* 需要传参，n为是否必填参数 */
export const isEmail = (n) => {
    return [
        {
          required: n,
          message: "不能为空",
          trigger: "blur",
        },
        {
          pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
          message: '请输入正确邮箱',
        },
      ];
}

3.经纬度验证（行内方式）

<el-form-item label="纬度：" prop="stationLat" rules="[{ required: false, trigger: 'blur' }, { pattern: /^([0-8]?\d{1}\.\d{0,4}|90\.0{0,4}|[0-8]?\d{1}|90)$/, message: '输入值为0-90,小数不能超过4位' }]">
   <el-input placeholder="" v-model ="stationdata.stationLat" size="mini" style="width: 100px"></el-input>
</el-form-item>
<el-form-item label="经度：" prop="stationLng" :rules="[{ required: false, trigger: 'blur' }, { pattern: /^(((\d|[1-9]\d|1[1-7]\d|0)\.\d{0,4})|(\d|[1-9]\d|1[1-7]\d|0{1,3})|180\.0{0,4}|180)$/, message: '输入值为0-180,小数不能超过4位' }]">
   <el-input placeholder="" v-model ="stationdata.stationLng" size="mini" style="width: 100px"></el-input>
</el-form-item>

4.百分比验证

[
  { required: true, message: "必填！！！", trigger: "blur" }, { pattern: /^(100|(([1-9]){1}[0-9]?|0{1})((\.)([0-9]){1,2})?)$/, message: '必须为正数，输入范围0-100，小数不能超过2位' }
]