ts封装常见的表单校验，适用于element-plus

我写技术文章没那么多废话，直接上代码:
1.用ts进行的封装，命名一个文件vaildation.ts

class FormValidationForm{
    //身高体重验证
    readonly hwReg:RegExp = /^[1-9]\d{1,2}$/;
    
    //鞋码验证
    readonly shoesReg:RegExp = /^[34]\d$|^50$/;
    
    //考生号8到14位纯数字
    //readonly kshReg:RegExp = /^[A-Za-z\d]{8,14}$/;
    readonly kshReg:RegExp = /^\d{8,14}$/;
    
    //身份证验证
    readonly idCardReg:RegExp = /^\d{17}[\dXx]$/;
    
    //银行卡号验证
    readonly bankNoReg:RegExp = /^\d{15,19}$/;
    
    //座机号码验证
    readonly telReg:RegExp = /^\d{3,4}-\d{7,8}$/;
    
    //联系号码验证
    readonly linktelReg:RegExp = /^1\d{10}$|^\d{3,4}-\d{7,8}$/;
    
    //手机号码验证
    readonly cellphoneReg:RegExp = /^1\d{10}$/;
    
    //微信号或手机号验证
    readonly wechatReg:RegExp = /^[1]\d{10}$|^[a-zA-Z][\da-zA-Z_-]{5,19}$/;
    
    //QQ号验证
    readonly qqReg:RegExp = /^\d{5,12}$/;
    
    //年龄验证
    readonly ageReg:RegExp = /^0$|^[1-9]\d{0,2}$/;
    
    //金额1验证
    readonly money1Reg:RegExp = /^0$|^[1-9]\d{0,8}$/;
    
    //金额2验证
    readonly money2Reg:RegExp = /^0$|^(([1-9]\d{0,8})|0)(\.\d{1,2})?$/;
    
    //人数（班级人数、失业人数、赡养人数）验证
    readonly personNumReg:RegExp = /^0$|^[1-9]\d{0,2}$/;
    
    //家庭人口数
    readonly familyNumReg:RegExp = /^[1-9]\d{0,2}$/;
    
    //邮编验证
    readonly postReg:RegExp = /^\d{6}$/;
    
    //成绩验证
    readonly scoreReg:RegExp = /^0(\.\d{1,2})?$|^[1-9]\d{0,1}(\.\d{1,2})?$|^100(\.00?)?$/;
    
    //姓名验证
    readonly nameReg:RegExp = /^[A-Za-z\d\u4e00-\u9fa5\n\s*\r_\.\·]+$/;
    
    //准考证号验证
    readonly zkzReg:RegExp = /^\d{10,30}$/;
    
    //电子邮箱验证
    readonly emailReg:RegExp = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    
    // 统一认证号，学号
    readonly userNoReg:RegExp = /^[A-Za-z\d-_]*$/;
    
    // 1000以内保留两位小数（包括0）
    readonly scoreReg2:RegExp = /^(0|[1-9]\d{0,2})(\.\d{1,2})?$/;

    Form(){
        let _this = this
        return {
            // 身高体重验证规则
            checkHW_R (rule: any, value:any, callback:any){
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.hwReg.test(value)) {
                    callback(new Error('请输入3位以内的正整数'))
                } else {
                    callback()
                }
            },
            // 身高体重验证规则
            checkHW_N (rule: any, value:any, callback:any) {
                if (value && !_this.hwReg.test(value)) {
                    callback(new Error('请输入3位以内的正整数'))
                } else {
                    callback()
                }
            },
             // 鞋码验证规则
            checkShoesize_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.shoesReg.test(value)) {
                    callback(new Error('请输入正确的鞋码'))
                } else {
                    callback()
                }
            },
            checkShoesize_N (rule: any, value:any, callback:any) {
                if (value && !_this.shoesReg.test(value)) {
                    callback(new Error('请输入正确的鞋码'))
                } else {
                    callback()
                }
            },
             // 考生号
            checkKsh_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.kshReg.test(value)) {
                    callback(new Error('请输入正确的考生号'))
                } else {
                    callback()
                }
            },
            checkKsh_N (rule: any, value:any, callback:any) {
                if (value && !_this.kshReg.test(value)) {
                    callback(new Error('请输入正确的考生号'))
                } else {
                    callback()
                }
            },
            checkIdCard_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.idCardReg.test(value)) {
                    callback(new Error('请输入正确的身份证号码'))
                } else {
                    callback()
                }
            },
            checkIdCard_N (rule: any, value:any, callback:any) {
                if (value && !_this.idCardReg.test(value)) {
                    callback(new Error('请输入正确的身份证号码'))
                } else {
                    callback()
                }
            },
            checkBankNo_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.bankNoReg.test(value)) {
                    callback(new Error('请输入正确的银行卡号'))
                } else {
                    callback()
                }
            },
            checkBankNo_N (rule: any, value:any, callback:any) {
                if (value && !_this.bankNoReg.test(value)) {
                    callback(new Error('请输入正确的银行卡号'))
                } else {
                    callback()
                }
            },
            checkTel_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.telReg.test(value)) {
                    callback(new Error('请输入区号-号码'))
                } else {
                    callback()
                }
            },
            checkTel_N (rule: any, value:any, callback:any) {
                if (value && !_this.telReg.test(value)) {
                    callback(new Error('请输入区号-号码'))
                } else {
                    callback()
                }
            },
            checkLinkTel_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.linktelReg.test(value)) {
                    callback(new Error('请输入手机号或座机号(区号-号码)'))
                } else {
                    callback()
                }
            },
            checkLinkTel_N (rule: any, value:any, callback:any) {
                if (value && !_this.linktelReg.test(value)) {
                    callback(new Error('请输入手机号或座机号(区号-号码)'))
                } else {
                    callback()
                }
            },
            checkCellPhone_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.cellphoneReg.test(value)) {
                    callback(new Error('请输入正确的手机号码'))
                } else {
                    callback()
                }
            },
            checkCellPhone_N (rule: any, value:any, callback:any) {
                if (value && !_this.cellphoneReg.test(value)) {
                    callback(new Error('请输入正确的手机号码'))
                } else {
                    callback()
                }
            },
            checkWechat_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.wechatReg.test(value)) {
                    callback(new Error('请输入正确的微信号或手机号'))
                } else {
                    callback()
                }
            },
            checkWechat_N (rule: any, value:any, callback:any) {
                if (value && !_this.wechatReg.test(value)) {
                    callback(new Error('请输入正确的微信号或手机号'))
                } else {
                    callback()
                }
            },
            checkQQ_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.qqReg.test(value)) {
                    callback(new Error('请输入正确的QQ号'))
                } else {
                    callback()
                }
            },
            checkQQ_N (rule: any, value:any, callback:any) {
                if (value && !_this.qqReg.test(value)) {
                    callback(new Error('请输入正确的QQ号'))
                } else {
                    callback()
                }
            },
            checkAge_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.ageReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkAge_N (rule: any, value:any, callback:any) {
                if (value && !_this.ageReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkMoney1_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.money1Reg.test(value)) {
                    callback(new Error('请输入9位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkMoney1_N (rule: any, value:any, callback:any) {
                if (value && !_this.money1Reg.test(value)) {
                    callback(new Error('请输入9位以内的自然数'))
                } else {
                    callback()
                }
            },
            //改错误提示请根据具体项目确定
            checkMoney2_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.money2Reg.test(value)) {
                    callback(new Error('格式错误，如200.00'))
                } else {
                    callback()
                }
            },
            checkMoney2_N (rule: any, value:any, callback:any) {
                if (value && !_this.money2Reg.test(value)) {
                    callback(new Error('格式错误，如200.00'))
                } else {
                    callback()
                }
            },
            checkLoan (rule: any, value:any, callback:any) {
                if (value && !_this.money2Reg.test(value)) {
                    callback(new Error('请输入正确的贷款金额'))
                } else {
                    callback()
                }
            },
            checkGet (rule: any, value:any, callback:any) {
                if (value && !_this.money2Reg.test(value)) {
                    callback(new Error('请输入正确的放款金额'))
                } else {
                    callback()
                }
            },
            checkPersonNum_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.personNumReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkPersonNum_N (rule: any, value:any, callback:any) {
                if (value && !_this.personNumReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkFamilyNum_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.familyNumReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkFamilyNum_N (rule: any, value:any, callback:any) {
                if (value && !_this.familyNumReg.test(value)) {
                    callback(new Error('请输入3位以内的自然数'))
                } else {
                    callback()
                }
            },
            checkPost_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.postReg.test(value)) {
                    callback(new Error('请输入正确的邮编'))
                } else {
                    callback()
                }
            },
            checkPost_N (rule: any, value:any, callback:any) {
                if (value && !_this.postReg.test(value)) {
                    callback(new Error('请输入正确的邮编'))
                } else {
                    callback()
                }
            },
            checkScore_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.scoreReg.test(value)) {
                    callback(new Error('请输入正确的成绩'))
                } else {
                    callback()
                }
            },
            checkScore_N (rule: any, value:any, callback:any) {
                if (value && !_this.scoreReg.test(value)) {
                    callback(new Error('请输入正确的成绩'))
                } else {
                    callback()
                }
            },
            checkScores_N (rule: any, value:any, callback:any) {// 1000以内
                if (value && !_this.scoreReg2.test(value)) {
                    callback(new Error('请输入正确的成绩'))
                } else {
                    callback()
                }
            },
            checkScores_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.scoreReg2.test(value)) {
                    callback(new Error('请输入正确的成绩'))
                } else {
                    callback()
                }
            },
            checkName_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.nameReg.test(value)) {
                    callback(new Error('请输入正确的用户姓名'))
                } else {
                    callback()
                }
            },
            checkName_N (rule: any, value:any, callback:any) {
                if (value && !_this.nameReg.test(value)) {
                    callback(new Error('请输入正确的用户姓名'))
                } else {
                    callback()
                }
            },
            checkZKZ_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.zkzReg.test(value)) {
                    callback(new Error('请输入30位以内的整数'))
                } else {
                    callback()
                }
            },
            checkZKZ_N (rule: any, value:any, callback:any) {
                if (value && !_this.zkzReg.test(value)) {
                    callback(new Error('请输入30位以内的整数'))
                } else {
                    callback()
                }
            },
            checkEamil_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.emailReg.test(value)) {
                    callback(new Error('请输入正确的电子邮箱'))
                } else {
                    callback()
                }
            },
            checkEamil_N (rule: any, value:any, callback:any) {
                if (value && !_this.emailReg.test(value)) {
                    callback(new Error('请输入正确的电子邮箱'))
                } else {
                    callback()
                }
            },
            checkEmail_QQ_N (rule: any, value:any, callback:any) {
                if (value) {
                    if (_this.qqReg.test(value) || _this.emailReg.test(value)) {
                        callback()
                    } else {
                        callback(new Error('请输入正确的QQ或电子邮箱'))
                    }
                } else callback()
            },
            checkStuNo_N (rule: any, value:any, callback:any) {
                if (value && !_this.userNoReg.test(value)) {
                    callback(new Error('请输入正确的学号'))
                } else {
                    callback()
                }
            },
            checkStuNo_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.userNoReg.test(value)) {
                    callback(new Error('请输入正确的学号'))
                } else {
                    callback()
                }
            },
            checkOneCardNo_N (rule: any, value:any, callback:any) {
                if (value && !_this.userNoReg.test(value)) {
                    callback(new Error('请输入正确的统一认证号'))
                } else {
                    callback()
                }
            },
            checkOneCardNo_R (rule: any, value:any, callback:any) {
                if (!value) {
                    return callback(new Error('必填'))
                }
                if (!_this.userNoReg.test(value)) {
                    callback(new Error('请输入正确的统一认证号'))
                } else {
                    callback()
                }
            }
        }
    }
}
export const formValidationForm = new FormValidationForm() 
//测试
// new FormValidationForm().Form().checkAge_N()
//FormValidationForm.inst.Form().checkAge_N()

2.使用场景

//import放最前面
import { formValidationForm }from '@/utils/vaildation'
const { Form } = formValidationForm ;
//rules是element-plus表单的校验规则
rules:{
     idCardNo: [{validator: Form().checkAge_N, trigger: 'blur' }],
 },

3.感谢
如果觉得写得好，记得收藏哦 ~ (O_O) ~