当前位置:网站首页>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
})
}
边栏推荐
- How to display real-time 2D map after rviz is opened
- Huisheng Huiying 2022 intelligent, fast and simple video editing software
- The third part of the construction of the defense system of offensive and defensive exercises is the establishment of a practical security system
- 每日三题 6.30(2)
- 2021 RoboCom 世界机器人开发者大赛-高职组初赛
- 2022安全员-C证考试题模拟考试题库及模拟考试
- Redis data types and application scenarios
- Leetcode(34)——在排序数组中查找元素的第一个和最后一个位置
- “35岁,公司老总,月薪2万送外卖“:时代抛弃你,连声再见都没有
- jpa手写sql,用自定义实体类接收
猜你喜欢

马赛克后挡板是什么?

软件架构的本质

Matplotlib常用设置

Linux基础 —— CentOS7 离线安装 MySQL

Development trend and future direction of neural network Internet of things

Current situation and future development trend of Internet of things

Future trend and development of neural network Internet of things

What is the mosaic tailgate?

Why is PHP called hypertext preprocessor

Yunxin small class | common cognitive misunderstandings in IM and audio and video
随机推荐
【微服务|Sentinel】@SentinelResource详解
距离度量 —— 汉明距离(Hamming Distance)
马赛克后挡板是什么?
内存泄露和内存溢出的区别是什么?
为什么PHP叫超文本预处理器
Some thoughts on game performance optimization
Zhongang Mining: it has inherent advantages to develop the characteristic chemical industry dominated by fluorine chemical industry
2022 crane driver (limited to bridge crane) examination questions and simulation examination
Oracle中已定义者身份执行函数AUTHID DEFINER与Postgresql行为的异同
What is the difference between memory leak and memory overflow?
“35岁,公司老总,月薪2万送外卖“:时代抛弃你,连声再见都没有
Redis AOF日志
Zhao Fuquan: to ensure supply in the short term, we should build a safe, efficient and resilient supply chain in the long term
Jerry's burning of upper version materials requires [chapter]
物联网开发零基础教程
JS - use of arguments
问题随记 —— 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
有没有一段代码,让你为人类的智慧所折服
SWT/ANR问题--SWT 导致 kernel fuse deadlock