当前位置:网站首页>Applet form verification encapsulation
Applet form verification encapsulation
2022-07-01 23:26:00 【akko_】
validate.js file :
class Validate {
constructor(rules, form) {
if (new.target === Validate) {
this.valid = true // Verification results
this.errorMessage = [] // error message
if (rules === undefined || typeof rules !== 'object') {
throw new Error(' Rule object must be passed in ');
} else {
this.rules = rules // Rule object
}
if (form === undefined || typeof form !== 'object') {
throw new Error(' The form object must be passed in ');
} else {
this.form = form // Form object
}
} else {
throw new Error(' You have to use new Command generation instance ');
}
}
// Verification is required
checkRequired(field) {
if (!field) return false
return true
}
// Check ID card
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
}
// Check cell phone number ( Most relaxed )
checkTel(field) {
if (!/^(?:(?:\+|00)86)?1\d{10}$/g.test(field)) return false
return true
}
// Checkbox
checkEmail(field) {
if (!
/^(([^<>()[\]\\.,;:\[email protected]"]+(\.[^<>()[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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
}
// check min
checkMin(min, field) {
if (typeof min !== "number" || typeof field !== "number") return false
if (field < min) return false
return true
}
// check max
checkMax(max, field) {
if (typeof max !== "number" || typeof field !== "number") return false
if (field > max) return false
return true
}
// check
__validateForm() {
// Traverse the rule object to match the form data
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)
}
// This field is required or not empty
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
Call mode :
import validate from "@/utils/validate.js"
lef form = {
phone:"",
code:""
}
const rules = {
phone: [{
tel: true,
message: ' Incorrect mobile phone number input '
}, {
required: true,
message: ' Cell phone number cannot be empty '
}],
code: [{
required: true,
message: ' Verification code cannot be empty '
}]
}
const valid = new validate(rules, {
phone: phone.value,
code: code.value
})
if (valid.__validateForm()) {
// Validation successfully executed
}else{
// Verification failure prompts an error
uni.showToast({
title: valid.errorMessage.join(","),
icon: "none",
duration: 2000
})
}
边栏推荐
- Switch to software testing, knowing these four points is enough!
- AirServer最新Win64位个人版投屏软件
- from pip._internal.cli.main import main ModuleNotFoundError: No module named ‘pip‘
- 问题随记 —— /usr/bin/perl is needed by MySQL-server-5.1.73-1.glibc23.x86_64
- Understanding threads
- MySQL -- convert rownum in Oracle to MySQL
- 问题随记 —— file /usr/share/mysql/charsets/README from install of MySQL-server-5.1.73-1.glibc23.x86_64 c
- flutter Unable to load asset: assets/images/888.png
- Create Ca and issue certificate through go language
- YOGA27多维一体电脑,兼具出色外观与高端配置
猜你喜欢

CADD course learning (3) -- target drug interaction

CKS CKA CKAD 将终端更改为远程桌面

ARP报文头部格式和请求流程

Redis~02 缓存:更新数据时如何保证MySQL和Redis中的数据一致性?

Practical application and extension of plain framework

Glass mosaic

Airserver latest win64 bit personal screen projection software

Current situation and future development trend of Internet of things

认识--Matplotlib

2022 R1 fast opening pressure vessel operation test questions and answers
随机推荐
Zero foundation tutorial of Internet of things development
Matplotlib common settings
什么是马赛克?
神经网络物联网的发展趋势和未来方向
每日三题 6.30(2)
会声会影2022智能、快速、简单的视频剪辑软件
Switch to software testing, knowing these four points is enough!
Understanding threads
Redis AOF日志
[LeetCode] 最后一个单词的长度【58】
Redis data types and application scenarios
转行软件测试,知道这四点就够了!
Daily three questions 6.29
[swoole Series 1] what will you learn in the world of swoole?
flutter Unable to load asset: assets/images/888.png
YOGA27多维一体电脑,兼具出色外观与高端配置
Experience of practical learning of Silicon Valley products
马赛克后挡板是什么?
2022年R1快开门式压力容器操作考题及答案
Why is PHP called hypertext preprocessor