Verification rules and commonly used regular expression verification in vue's rules
rules: {
//Verify non-empty and length name: [{
required: true,
message: "Site name cannot be empty",
trigger: "blur"
},{
min: 3,
max: 5,
message: 'Length between 3 and 5 characters',
trigger: 'blur'
}],
//Verify the value age: [{
type: 'number',
message: 'Age must be a numeric value',
trigger: "blur"
}],
//Verification date birthday:[{
type: 'date',
required: true,
message: 'Please select a date',
trigger: 'change'
}],
//Verify multiple choice habit: [{
type: 'array',
required: true,
message: 'Please choose at least one hobby',
trigger: 'change'
}],
//Verify the email address email: [{
type: 'email',
message: 'Please enter the correct email address',
trigger: ['blur', 'change']
}],
// Verify mobile phone number telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "Please enter the correct mobile phone number",
trigger: "blur"
}],
// Verify longitude The integer part is 0-180 The decimal part is 0 to 7 digits longitude: [{
pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
message: "Integer part is 0-180, decimal part is 0 to 7 digits",
trigger: "blur"
}],
// Verify dimensions The integer part is 0-90 The decimal part is 0 to 7 digits latitude: [{
pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "Integer part is 0-90, decimal part is 0 to 7 digits",
trigger: "blur"
}]
}Custom verification rules in vue rules
<script>
import { checkParam } from "@/api/system/";
export default {
name: "Param",
data() {
var validateCode = (rule, value, callback) => {
if (value === '') {} else {
if (value !== '') {
const param = {
id: ,
code:
}
checkParam(param).then(response => {
if (!) {
callback(new Error());
} else {
callback();
}
});
}
}
};
return {
// Form verification rules: {
code: [{
required: true,
message: "Parameter encoding cannot be empty",
trigger: "blur"
}, {
max: 50,
message: 'The parameter code is within 50 words',
trigger: 'blur'
}, {
validator: validateCode,
trigger: 'blur'
}]
}
};
},
created() {
},
methods: {
}
};
</script>How to use
age: [{ validator: , tigger: 'blur' }]Verification tool class
import validator from 'validator'
/* The name of the form verification rule method ends with Rule, which is convenient to distinguish between one-time verification*/
export default {
validateNumberRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!('' + value)) {
callback(new Error('Please enter the number'))
} else {
callback()
}
},
validateNumberGTZRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (('' + value, [{ no_symbols: false }]) && value > 0) {
callback()
} else {
callback(new Error('Please enter a positive number'))
}
},
validateIntegerRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!('' + value)) {
callback(new Error('Please enter an integer'))
} else {
callback()
}
},
validateIngeterGTZRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!('' + value, { gt: 0 })) {
callback(new Error('Please enter a positive integer'))
} else {
callback()
}
},
validateAlphaRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!(value, 'en-US')) {
callback(new Error('Please enter pure letters'))
} else {
callback()
}
},
/* Is the ID number*/
validateIdNoRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!(value)) && value !== '') {
callback(new Error('Please enter the correct ID number'))
} else {
callback()
}
}
},
/* Whether the ID card number, detailed rules check*/
validateIdNoStrictRule(rule, code, callback) {
if (code === undefined || code === null || code === '') {
callback()
}
const city = {
11: 'Beijing',
12: 'Tianjin',
13: 'Hebei',
14: 'Shanxi',
15: 'Inner *',
21: 'Liaoning',
22: 'Jilin',
23: 'Heilongjiang',
31: 'Shanghai',
32: 'Jiangsu',
33: 'Zhejiang',
34: 'Anhui',
35: 'Fujian',
36: 'Jiangxi',
37: 'Shandong',
41: 'Henan',
42: 'Hubei',
43: 'Hunan',
44: 'Guangdong',
45: 'Guangxi',
46: 'Hainan',
50: 'Chongqing',
51: 'Sichuan',
52: 'Guizhou',
53: 'Yunnan',
54: 'Tibet ',
61: 'Shaanxi',
62: 'Gansu',
63: 'Qinghai',
64: 'Ningxia',
65: '*',
71: '*',
81: 'Hongkong',
82: 'Macao',
91: 'Foreign'
}
let tip = ''
let pass = true
if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/(code)) {
tip = 'Identity card number format is wrong'
pass = false
} else if (!city[(0, 2)]) {
tip = 'Address encoding error'
pass = false
} else {
// The 18-digit ID card needs to be verified for the last check bit if ( === 18) {
code = ('')
// ∑(ai×Wi)(mod 11)
// Weighting factor const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// Check bit const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
let sum = 0
let ai = 0
let wi = 0
for (let i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
if (parity[sum % 11] !== code[17]) {
tip = 'Check bit error'
pass = false
}
}
}
if (!pass) {
callback(new Error(tip))
} else {
callback()
}
// if (!pass) alert(tip)
// return pass
},
validateURLRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
if (!(value)) {
callback(new Error('Please enter the correct URL'))
} else {
callback()
}
},
/* Email:
validateEMailRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if (!(value)) {
callback(new Error('Please enter the correct email address'))
} else {
callback()
}
}
},
/* Is the mobile phone number*/
validateMobileRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!(value)) && value !== '') {
callback(new Error('Please enter the correct phone number'))
} else {
callback()
}
}
},
/* Is it a mobile phone number or landline*/
validateTelOrMobileRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!(value)) && value !== '') {
callback(new Error('Please enter the correct phone number or landline number'))
} else {
callback()
}
}
},
/* Is it landline*/
validateTelphoneRule(rule, value, callback) {
if (value === undefined || value === null || value === '') {
callback()
}
const reg = /0\d{2}-\d{7,8}/
if (value === '' || value === undefined || value === null) {
callback()
} else {
if ((!(value)) && value !== '') {
callback(new Error('Please enter the correct landline (format: area code + number, such as 010-1234567)'))
} else {
callback()
}
}
},
/* Is it a legal IP address*/
validateIPRule(rule, value, callback) {
if (value === '' || value === undefined || value === null) {
callback()
} else {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
if ((!(value)) && value !== '') {
callback(new Error('Please enter the correct IP address'))
} else {
callback()
}
}
}
}This is the end of this article about the implementation of commonly used rules verification rules in Vue. For more related contents of Vue rules verification rules, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!