element-ui表单自定义常用验证

### **有`options`的使用方式**
```
rules: {
    name: [
        { required: true, message: "", trigger: "blur" },
        { validator: (...args) => validatePrice({ min: 1, max: 100 }, ...args), trigger: "blur" }
    ],
},
```

### **验证方法**
```
/**
 * 校验用户名是否重名
 * @param rule
 * @param value
 * @param callback
 */
export const validateUsername = (rule, value, callback) => {
    getDetails(value).then(response => {
        if (window.boxType === "edit") callback()
        const result = response.data.data
        if (result !== null) {
            callback(new Error("用户名已经存在"))
        } else {
            callback()
        }
    })
}
/**
 * 校验字符串(多合一按需选择需要的校验)
 * options: {
 *      min: Number | String, 最小长度, 默认 1
 *      max: Number | String, 最大长度, 无限
 *      underline: Boolean, 是否需要下划线校验, 默认 true
 *      number: Boolean, 是否需要数字校验, 默认 true
 *      numericalValue: Boolean, 是否需要校验数字的值大小, 默认 false
 *      chinese: Boolean, 是否需要中文校验, 默认 true
 *      letter: Boolean, 是否需要字母校验, 默认 true
 *      start: Boolean, 是否从开头校验, 默认 true
 *      end: Boolean, 是否校验到结尾, 默认 true
 *      global: Boolean, 是否全局校验, 默认 true
 *      caseFlag: Boolean, 是否忽略大小写, 默认 true
 *      ignoreAll: Boolean, 是否只验证长度, 默认 false
 * }
 * @param rule
 * @param value
 * @param callback
 * @param options Object 额外条件
 */
export const validateString = (options = {}, rule, value, callback) => {
    const {
        min = 1,
        max,
        underline = true,
        number = true,
        letter = true,
        chinese = true,
        start = true,
        end = true,
        global = true,
        caseFlag = true,
        ignoreAll,
        numericalValue = false,
    } = options
    if (numericalValue) {
        if ((min != undefined && min != "" ? value < min : false) || (max != undefined && max != "" ? value > max : false)) {
            callback(new Error(`请输入数字, ${ min != undefined && min != "" ? "最小" + min : "" }${ max != undefined && max != "" ? "最大" + max : "" }`))
        } else {
            callback()
        }
        return
    }
    let reg = ""
    if (start) {
        reg += "^"
    }
    if (!ignoreAll) {
        reg += "["
        if (chinese) {
            reg += "\\u4E00-\\u9FA5"
        }
        if (letter) {
            reg += "A-Za-z"
        }
        if (number) {
            reg += "0-9"
        }
        if (underline) {
            reg += "_"
        }
        reg += "]"
    } else {
        reg += "."
    }
    reg += `{${ min },${ max || "" }}`
    if (end) {
        reg += "$"
    }
    const flags = `${ global ? "g" : "" }${ caseFlag ? "i" : "" }`
    reg = new RegExp(reg, flags)
    if (value && (!(reg).test(value))) {
        const validateMsg = `${ chinese ? "中文" : "" }${ letter ? "英文" : "" }${ number ? "数字" : "" }${ underline ? "包括下划线" : "" }`
        let err = `请输入${ ignoreAll ? "内容" : validateMsg }, 长度最少${ min }位${ max ? ", 最多" + max + "位" : "" }`
        callback(new Error(err))
    } else {
        callback()
    }
}
/**
 * 纳税人识别号
 * @param rule
 * @param value
 * @param callback
 */
export const validaTetaxIdenNumber = (rule, value, callback) => {
    var reg = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
    if (value && (!(reg).test(value))) {
        callback(new Error("请输入正确的纳税人识别号"))
    } else {
        callback()
    }
}
/**
 * 银行账号
 * @param rule
 * @param value
 * @param callback
 */
export const validateBankCard = (rule, value, callback) => {
    var reg = /^([1-9]{1})(\d{14}|\d{18})$/
    if (value && (!(reg).test(value))) {
        callback(new Error("请输入正确的开户账号"))
    } else {
        callback()
    }
}
/**
 * 座机号码, 包括分机号码
 * @param rule
 * @param value
 * @param callback
 */
export const validateLandline = (rule, value, callback) => {
    var reg = /^(0\d{2,3}-\d{7,8}(-\d{1})?)$/
    if (value && (!(reg).test(value))) {
        callback(new Error("请输入正确的座机号码"))
    } else {
        callback()
    }
}
/**
 * 手机号码
 * @param rule
 * @param value
 * @param callback
 */
export const validatePhone = (rule, value, callback) => {
    var reg = /^[1](([3|5|8][\d])|([4][4,5,6,7,8,9])|([6][2,5,6,7])|([7][^9])|([9][1,8,9]))[\d]{8}$/
    if (value && (!(reg).test(value))) {
        callback(new Error("请输入正确的手机号码"))
    } else {
        callback()
    }
}
/**
 * 账户密码
 * @param rule
 * @param value
 * @param callback
 */
export const validatePassword = (rule, value, callback) => {
    var reg = /^\w{6,16}$/
    if (value && (!(reg).test(value))) {
        callback(new Error("密码格式为6-16位数字,英文和下划线"))
    } else {
        callback()
    }
}
/**
 * 验证金额/数字
 * options: {
 *      min: Number | String, 最小, 默认 0.01
 *      max: Number | String, 最大, 默认无限大
 *      len: Number | String, 小数位数, 优先取
 * }
 * @param rule
 * @param value
 * @param callback
 */
export const validatePrice = (options = {}, rule, value, callback) => {
    try {
        const { min = 0.01, max, len: l } = options
        let len = l
        if (!len) {
            const len1 = (min.toString().split(".")[1] || []).length
            const len2 = ((max || "0").toString().split(".")[1] || []).length
            len = len1 > len2 ? len1 : len2
        }
        const flag = len > 0
        const floatStr = flag ? "\\d*(\\.\\d{1," + len + "})?" : "[0-9]*"
        const str = "^[1-9]+" + floatStr + "$|^0\\.([1-9]|\\d[1-9])$"
        const reg = new RegExp(str)
        if (!reg.test(value) || value < min || (max && value > max)) {
            const errStr = flag ?
                `最多${ len }位小数. 范围最小${ min }元${ max ? (", 最大" + max + "元") : "" }`
                : `最小值${ min }${ max ? ", 最大值" + max : "" }的整数`
            callback(new Error(`请输入正确的数值, ${ errStr }`))
        } else {
            callback()
        }
    } catch (e) {
        console.log(e)
    }
}

```

Leanote's Blog

Navigation

Recent Posts

Friend Links