当前位置:网站首页>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
})
}
边栏推荐
- 每日三题 6.29
- 认识线程
- What professional classification does the application of Internet of things technology belong to
- Jielizhi, production line assembly link [chapter]
- Yoga27 multidimensional all-in-one computer with excellent appearance and high-end configuration
- Openresty load balancing
- AirServer最新Win64位个人版投屏软件
- Huisheng Huiying 2022 intelligent, fast and simple video editing software
- Y53. Chapter III kubernetes from introduction to mastery -- ingress (26)
- URL introduction
猜你喜欢
YOGA27多维一体电脑,兼具出色外观与高端配置
实在RPA:银行数字化,业务流程自动化“一小步”,贷款审核效率“一大步”
Notes to problems - file /usr/share/mysql/charsets/readme from install of mysql-server-5.1.73-1 glibc23.x86_ 64 c
【微服务|Sentinel】sentinel整合openfeign
【小程序】通过scroll-view组件实现左右【滑动】列表
微信个人小商店一键开通助手小程序开发
日本购物网站的网络乞丐功能
软件架构的本质
Jerry's records are powered by Vbat with a power supply voltage of 4.2V [chapter]
[micro service sentinel] sentinel integrates openfeign
随机推荐
【无标题】
[swoole Series 1] what will you learn in the world of swoole?
物联网现状及未来发展趋势
为什么PHP叫超文本预处理器
CKS CKA CKAD 将终端更改为远程桌面
Current situation and future development trend of Internet of things
2021 RoboCom 世界机器人开发者大赛-本科组初赛
dat.GUI
Huisheng Huiying 2022 intelligent, fast and simple video editing software
Leetcode (34) -- find the first and last positions of elements in a sorted array
dat. GUI
“35岁,公司老总,月薪2万送外卖“:时代抛弃你,连声再见都没有
想请教股票开户要认识谁?在线开户是安全么?
【小程序】通过scroll-view组件实现左右【滑动】列表
【微服务|Sentinel】SentinelResourceAspect详解
What is the mosaic tailgate?
Microservice stability management
玻璃马赛克
De PIP. Interne. CLI. Main Import main modulenotfounderror: No module named 'PIP'
Redis RDB快照