el-form form rule verification (special characters, Chinese, numbers, etc.)
In element-UI, el-form has a verification function, and the usage is as follows:
<template>
<div>
<el-form size="small" ref="userform" :rules="rulesForm" :model="form">
<el-form-item label="username" prop="userName">
<el-input ="" :disabled="addUserDialogTitle == 'Edit user'"></el-input>
</el-form-item>
<el-form-item label="Contact Information" prop="phone">
<el-input =""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Create now</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { checkSpecialKey,validateInputPhone } from '@/api/check'
export default {
name: 'userList',
data () {
let validateInputSpecialKey = (rule, value, callback) => {
if (!checkSpecialKey(value)) {
callback(new Error("No special characters!!"));
} else {
callback();
}
};
let validateInputPhone = (rule, value, callback) => {
if (!checkPhone(value)) {
callback(new Error("Please enter the contact information correctly!!"));
} else {
callback();
}
};
return {
form：{},
rulesForm: {//Popular window input box verification userName: [
{ required: true,message: "Please enter a username",trigger: "blur"},
{ min: 3,max: 10,message: "Length in 3 - 10 characters" },
{ validator: validateInputSpecialKey, trigger: "blur" }
],
phone:[
{ required: true,message: "Please enter contact information",trigger: "blur"},
{ validator: validateInputPhone, trigger: "blur" }
]
}
}
},
methods:{
//Submit the form onSubmit(){
this.$refs['userform'].validate((valid) => {
if (valid) {
//TODO calls the interface to submit data }else{
return false
}
})
}
}
}
</script>The verification methods are
Verify whether special characters are included
export function checkSpecialKey(str) {
let specialKey =
"[`~!#$^&*()=|{}':;'\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
for (let i = 0; i < ; i++) {
if (((i, 1)) != -1) {
return false;
}
}
return true;
}Verify whether special characters are included (path-specific)
export function checkSpecialKeyPath(str) {
let specialKey =
"[`~!#$^&*()=|{}';'<>?~！#￥……&*（）——|{}【】‘；”“'。，、？]‘'";
for (let i = 0; i < ; i++) {
if (((i, 1)) != -1) {
return false;
}
}
return true;
}Check whether Chinese is included
export function checkChinese(val) {
// Regularly match characters that are not Chinese and English and numbers let reg = /[\u4e00-\u9fa5]/;
let n = (val);
if ( n ) {
return false
}
return true
}Verify whether the mobile phone number or fixed-line phone number
export function checkPhone(val) {
let reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
let n = (val);
if ( !n ) {
return false
}
return true
}Verify the password to pass
export function checkPassword(val) {
let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;
let n = (val);
if ( !n ) {
return false
}
return true
}Verify non-negative floating point numbers
export function checkNumberNotNegative(val) {
let reg = /^\d+(\.\d+)?$/;
let n = (val);
if ( !n ) {
return false
}
return true
}Rules form validation in vue (commonly used)
First bind rules in the form and define the attribute prop in the item:
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item label="Activity Name" prop="name"> <el-input v-model=""></el-input> </el-form-item> </el-form>
Write rules in data or computed:
rules {
name: [ { type: 'string',required: true,message: "Required Name", trigger: 'blur'}, {max: 30,message: "The name length cannot exceed 30 digits" }]
}where name is the prop name
-
type:type -
required: Whether it is required (Is this column empty) -
message: Error message -
trigger: Trigger method ( -
blur: Verify when the focus is lost - Commonly used: Verification of input input box
-
change: Verify when the value changes - Commonly used: drop-down box select, date selection box date-picker, checkbox checkbox, radio box radio)
You can also use pattern to perform matching verification directly
name: [ { pattern: Verification conditions, required: true, message: "Prompt message", trigger: "blur" }]Verification rules and commonly used regular expression verification in vue 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"
}]
}Common rules verification rules in front-end Vue
1. Whether the IP address is legal:
pattern:/^(\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])$/,2. Whether it is a mobile phone number or a fixed phone number
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,3. Is the ID number?
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,4. Whether to email
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5. Fill in integers
pattern:/^-?[1-9]\d*$/,
6. Fill in positive integers
pattern:/^[1-9]\d*$/,
7. Lowercase letters
pattern:/^[a-z]+$/,
8. Capital letters
pattern:/^[A-Z]+$/,
9. Case mixing
pattern:/^[A-Za-z]+$/,
10. Multiple 8-digit numeric formats (yyyyMMdd) separated by commas
pattern:/^\d{8}(\,\d{8})*$/,11. Numbers plus English, without special characters
pattern:/^[a-zA-Z0-9]+$/,
12. The first two digits are numbers and the next one is in English
pattern:/^\d{2}[a-zA-Z]+$/,13. Password verification (6-20 digits of English letters, numbers or symbols (except spaces), and letters, numbers and punctuation marks contain at least two types)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14. Chinese verification
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.