element自定义表单验证

/**validate.js
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
/**
 * 手机号码
 * @param {*} s
 */
export  function checkPhone(rule, value, callback){
	const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
	if (!value) {
		return callback(new Error('电话号码不能为空'))
	}
	if (!Number.isInteger(+value)) {
		callback(new Error('请输入数字值'))
	} else {
		if (phoneReg.test(value)) {
			callback()
		} else {
			callback(new Error('电话号码格式不正确'))
		}
	}
	setTimeout(() => {
		// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
		// 所以我就在前面加了一个+实现隐式转换

		if (!Number.isInteger(+value)) {
			callback(new Error('请输入数字值'))
		} else {
			if (phoneReg.test(value)) {
				callback()
			} else {
				callback(new Error('电话号码格式不正确'))
			}
		}
	}, 100)
}
/**
 * 是否是数字带小数点
 * @param {*} s
 */
export function isnumber(rule, value, callback) {
                if (!value) {
                    callback();
                } else {
                    var reg = /^-?\d{1,16}(?:\.\d{1,4})?$/;//小数点左边最高16位，小数点右边最多4位
                    if (reg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("输入正确的数字,小数点后可1到4位"));
                    }
                }
            }

在页面引用

 <el-form :model="dataForm" :rules="dataRule" ref="dataForm" 
      label-width="110px">
      <el-form-item label="客户电话" prop="phone">
            <el-input v-model="dataForm.phone" placeholder="请输入客户电话"  size="medium"/>
          </el-form-item>
  </el-form>

  import {checkPhone} from '@/utils/validate.js'
 export default {
    data() {
      return {
	      dataForm:{
				phone:''
			}
      }
  },
 computed: {
      dataRule() {
        return {
       
         phone: [
           { required: true,validator: checkPhone,trigger: 'blur'}
         ]
        }
      }
    }
    }

如果是select 验证 trigger: ‘change’
如果验证不了，有可能是prop属性没有写