Git repository welcome star & fork ~ ~

Note: the source code is not exactly the same as the following example, the source code will continue to supplement the verification rules, welcome to pay attention to, mention issue

As anyone who has ever done a validation requirement knows, validation is a hassle.

There are many rules and many verification fields, which bring huge workload to our front end.

Accidentally, there will be a lot of if and else unmaintainable code in the code.

Therefore, I think a team or a project needs a validation tool to simplify our work.

First, take a look at Joi. Just look at this snippet of code:

Joi.string().alphanum().min(3).max(30).required()

I wish my validation tool Coi was also a chained call, which greatly simplifies the code.

Verification, in fact, there are three main input parameters: the data to be verified, the error message, the verification rules.

Let’s just post the code. It’s only a hundred lines.

export default class Coi {
    constructor(prop) {
        this.input = prop
        this.errorMessage = 'Verified'// Error message this.pass =true} // Data input data(input) {if(! this.pass)return this

        this.input = input
        returnThis} // Mandatory, cannot be empty isRequired(message) {if(! this.pass)return this

        if (
            /^\s*$/g.test(this.input) ||
            this.input === null ||
            this.input === undefined
        ) {
            this.errorMessage = message
            this.pass = false
        }
        returnThis} // minLength(length, message) {if(! this.pass)return this

        if (this.input.length < length) {
            this.errorMessage = message
            this.pass = false
        }
        returnThis} // maxLength(length, message) {if(! this.pass)return this

        if (this.input.length > length) {
            this.errorMessage = message
            this.pass = false
        }
        returnNumber: number, letter: letter, Chinese: Chinese requireFormat(formatArray, message) {if(! this.pass)return this
        let formatMap = {
            number: 0,
            letter: 0,
            chinese: 0
        }

        Object.keys(formatMap).forEach(key => {
            if (formatArray.includes(key)) formatMap[key] = 1
        })

        let formatReg = new RegExp(
            `^[${formatMap.number ? '0-9' : ' '}${
                formatMap.letter ? 'a-zA-Z' : ' '
            }${formatMap.chinese ? '\u4e00-\u9fa5' : ''}] * $`)if(! formatReg.test(this.input)) { this.errorMessage = message this.pass =false
        }
        returnThis} isEmail(message) {if(! this.pass)return this

        const emailReg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.) Tobacco on {1} [a - z0-9] + $/if(! emailReg.test(this.input)) { this.errorMessage = message this.pass =false
        }
        returnThis} // ulR check isURL(message) {if(! this.pass)return this

        const urlReg = new RegExp(
            '^ (? ! mailto:)(? : (? :http|https|ftp)://|//)(? :\\S+(? ::\\S*)? @)? (? : (? : (? :[1-9]\\d? |1\\d\\d|2[01]\\d|22[0-3])(? : \ \. (? : 1? \ \ d {1, 2} | 2 \ \ [0-4] d | 25 [0-5])) {2} (? : \ \. (? :[0-9]\\d? |1\\d\\d|2[0-4]\\d|25[0-4]))|(? : (? :[a-z\\u00a1-\\uffff0-9]+-?) *[a-z\\u00a1-\\uffff0-9]+)(? : \ \. (? :[a-z\\u00a1-\\uffff0-9]+-?) *[a-z\\u00a1-\\uffff0-9]+)*(? : \ \. (? :[a-z\\u00a1-\\uffff]{2,})))|localhost)(? : : \ \ d {2, 5})? (? : (/ | \ \? |#)[^\\s]*)? $'.'i'
        )
        if(! urlReg.test(this.input)) { this.errorMessage = message this.pass =false
        }
        returnThis} // Custom regular check requireRegexp(reg, message) {if(! this.pass)return this

        if(! reg.test(this.input)) { this.errorMessage = message this.pass =false
        }
        return this
    }
}
Copy the code

The posture is as follows:

import Coi from 'js-coi'

const validCoi = new Coi()
validCoi
    .data('1234')
    .isRequired('ID cannot be null')
    .minLength(3, 'ID must not be less than 3 digits')
    .maxLength(5, 'ID cannot be more than 5 digits')

    .data('1234@qq.')
    .isRequired('Mailbox cannot be empty')
    .isEmail('Email format is not correct')

    .data('http:dwd')
    .isRequired('URL cannot be empty')
    .isURL('Url format is not correct')

if(! validCoi.pass) { this.$message.error(validCoi.errorMessage)
    return
}
Copy the code

Of course you can use this if you only validate one field:

import Coi from 'js-coi'

const idCoi = new Coi('1234')
idCoi
    .isRequired('ID cannot be null')
    .minLength(3, 'ID must not be less than 3 digits')
    .maxLength(5, 'ID cannot be more than 5 digits')
    .isEmail('Id mailbox format is incorrect')
    .isURL('ID format is not correct')
    .requireFormat(['number'.'letter'.'chinese'].'ID format is not correct')
    .requireRegexp(/012345/, 'ID format is not correct')

if(! idCoi.pass) { this.$message.error(idCoi.errorMessage)
    return
}
Copy the code