Several commonly used form rules verification methods in vue
message: Report an error message
trigger: trigger method
1)blur: Verify when the focus is lost
2) Change: Verify when the value changes
required: Specify whether the field is required (Is this column empty)
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [
{
required: true,
message: 'Please enter the assessment level',
trigger: 'blur',
}
]
}
min/max: Used to verify the minimum or maximum value of the field (applicable to string length or numeric range)
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
min: 2,
max: 5,
message: 'The character length is between 2 and 5',
trigger: 'blur'
}]
}
type: Specify the type of the field, such as string, number, boolean, array, date, email, url, etc.
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
min: 1,
max: 100,
type: 'number',
message: 'Please enter a number between 1 and 100',
trigger: 'change'
}]
}
pattern: Verify using regular expressions
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
pattern: /^[a-zA-Z0-9]+$/,
message: 'Only include letters and numbers',
trigger: 'blur'
}
]
}
Validator: Custom validation logic, providing maximum flexibility, using callback functions to handle complex validation logic
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('The input cannot be empty'));
} else if (!/^\d+$/.test(value)) {
callback(new Error('Please enter the number'));
} else {
callback(); // Verification passed }
},
trigger: 'change'
}
]
}
enum: Specifies an enum value to verify that the input is in a collection of specific values
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
type: 'enum',
enum: ['option1', 'option2'],
message: 'Please select the valid option',
trigger: 'change'
}]
}
len: Fixed length of verification field (for strings or arrays)
{
label: "User Name",
prop: "UserName",
type: "input",
rules: [{
len: 5,
message: 'Please enter 5 characters',
trigger: 'blur'
}]
}
Extension: There is a requirement. I need to add a custom rule rule to the monitoring attribute. The rule is to determine whether two dates meet the conditions. If they do not meet, they need to return 'date verification error'
This is the end of this article about the commonly used rules verification methods in vue. For more related vue rules verification content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!