小程序表单校验封装

validate.js文件:

class Validate {
	constructor(rules, form) {
		if (new.target === Validate) {
			this.valid = true // 校验结果
			this.errorMessage = [] // 错误信息
			if (rules === undefined || typeof rules !== 'object') {
				throw new Error('必须传入规则对象');
			} else {
				this.rules = rules // 规则对象
			}
			if (form === undefined || typeof form !== 'object') {
				throw new Error('必须传入表单对象');
			} else {
				this.form = form // 表单对象
			}
		} else {
			throw new Error('必须使用 new 命令生成实例');
		}
	}

	// 校验必填
	checkRequired(field) {
		if (!field) return false
		return true
	}

	// 校验身份证
	checkIdCard(field) {
		if (!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/g.test(field))
			return false
		return true
	}

	// 校验手机号(最宽松)
	checkTel(field) {
		if (!/^(?:(?:\+|00)86)?1\d{10}$/g.test(field)) return false
		return true
	}

	// 校验邮箱
	checkEmail(field) {
		if (!
			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/g
			.test(field)) return false
		return true
	}

	// 校验min
	checkMin(min, field) {
		if (typeof min !== "number" || typeof field !== "number") return false
		if (field < min) return false
		return true
	}

	// 校验max
	checkMax(max, field) {
		if (typeof max !== "number" || typeof field !== "number") return false
		if (field > max) return false
		return true
	}

	// 进行校验
	__validateForm() {
		// 遍历规则对象去表单数据匹配
		for (const ruleItemKey of Object.keys(this.rules)) {
			let ruleItem = this.rules[ruleItemKey]
			for (let i = 0; i < ruleItem.length; i++) {
				if (ruleItem[i].required !== undefined && ruleItem[i].required) {
					this.valid = this.valid && this.checkRequired(this.form[ruleItemKey])
					if (!this.checkRequired(this.form[ruleItemKey])) this.errorMessage.push(ruleItem[i].message)
				}
				// 该字段必填或者该字段不为空
				if (ruleItem[i].required || this.form[ruleItemKey]) {
					if (ruleItem[i].idcard !== undefined && ruleItem[i].idcard) {
						this.valid = this.valid && this.checkIdCard(this.form[ruleItemKey])
						if (!this.checkIdCard(this.form[ruleItemKey])) this.errorMessage.push(ruleItem[i].message)
					}
				}
				if (ruleItem[i].required || this.form[ruleItemKey]) {
					if (ruleItem[i].tel !== undefined && ruleItem[i].tel) {
						this.valid = this.valid && this.checkTel(this.form[ruleItemKey])
						if (!this.checkTel(this.form[ruleItemKey])) this.errorMessage.push(ruleItem[i].message)
					}
				}
				if (ruleItem[i].required || this.form[ruleItemKey]) {
					if (ruleItem[i].email !== undefined && ruleItem[i].email) {
						this.valid = this.valid && this.checkEmail(this.form[ruleItemKey])
						if (!this.checkEmail(this.form[ruleItemKey])) this.errorMessage.push(ruleItem[i].message)
					}
				}
				if (ruleItem[i].required || this.form[ruleItemKey]) {
					if (ruleItem[i].min !== undefined && ruleItem[i].min) {
						this.valid = this.valid && this.checkMin(ruleItem[i].min, this.form[ruleItemKey])
						if (!this.checkMin(ruleItem[i].min, this.form[ruleItemKey])) this.errorMessage.push(
							ruleItem[i].message)
					}
				}
				if (ruleItem[i].required || this.form[ruleItemKey]) {
					if (ruleItem[i].max !== undefined && ruleItem[i].max) {
						this.valid = this.valid && this.checkMax(ruleItem[i].max, this.form[ruleItemKey])
						if (!this.checkMax(ruleItem[i].max, this.form[ruleItemKey])) this.errorMessage.push(
							ruleItem[i].message)
					}
				}
			}
		}
		return this.valid
	}
}
export default Validate

调用方式:

    import validate from "@/utils/validate.js"
    lef form = {
		phone:"",
		code:""
	}
    const rules = {
		phone: [{
			tel: true,
			message: '手机号输入不正确'
		}, {
			required: true,
			message: '手机号不能为空'
		}],
		code: [{
			required: true,
			message: '验证码不能为空'
		}]
	}
    const valid = new validate(rules, {
			phone: phone.value,
			code: code.value
	})
	if (valid.__validateForm()) {
	// 验证成功执行
	}else{
	// 验证失败提示错误
	    uni.showToast({
			title: valid.errorMessage.join(","),
			icon: "none",
			duration: 2000
		})
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值