<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
Write rules rules in data:
rules {
name: [ {
type: 'string',required: true,message: "名称必填", trigger: 'blur'},
{
max: 30,message: "名称长度不能超过30位" }]
}
where name is the prop name
type: type
required: whether it is required (whether this column is empty)
message:""Set the prompt message when the verification rule is not met;
trigger:""Set the trigger method of the verification:
'change': Triggered when the data changes; commonly used: validation of the input input box
'blur': triggered when the focus is lost; commonly used: drop-down box select, date selection box date-picker, checkbox checkbox, radio pattern
: regular expression validation Form
validator: The validator can be verified using a custom method
The verification rules and common regular expression verification that come with vue's rules
rules: {
//验证非空和长度
name: [{
required: true,
message: "站点名称不能为空",
trigger: "blur"
},{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}],
//验证数值
age: [{
type: 'number',
message: '年龄必须为数字值',
trigger: "blur"
}],
//验证日期
birthday:[{
type: 'date',
required: true,
message: '请选择日期',
trigger: 'change'
}],
//验证多选
habit: [{
type: 'array',
required: true,
message: '请至少选择一个爱好',
trigger: 'change'
}],
//验证邮箱
email: [{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}],
// 验证手机号
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}],
// 验证经度 整数部分为0-180小数部分为0到7位
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: "整数部分为0-180,小数部分为0到7位",
trigger: "blur"
}],
// 验证维度 整数部分为0-90小数部分为0到7位
latitude: [{
pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "整数部分为0-90,小数部分为0到7位",
trigger: "blur"
}]
}
Common regular expressions
1、是否合法IP地址:
/^(\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.是否手机号码或者固话
/^((0\d{
2,3}-\d{
7,8})|(1[34578]\d{
9}))$/,
3. 是否身份证号码
/(^\d{
15}$)|(^\d{
18}$)|(^\d{
17}(\d|X|x)$)/,
4.是否邮箱
/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整数填写
/^-?[1-9]\d*$/,
6.正整数填写
/^[1-9]\d*$/,
7.小写字母
/^[a-z]+$/,
8.大写字母
/^[A-Z]+$/,
9.大小写混合
/^[A-Za-z]+$/,
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
/^\d{
8}(\,\d{
8})*$/,
11.数字加英文，不包含特殊字符
/^[a-zA-Z0-9]+$/,
12.前两位是数字后一位是英文
/^\d{
2}[a-zA-Z]+$/,
13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){
6,20}$/,
14.中文校验
/^[\u0391-\uFFE5A-Za-z]+$/
You can also refer to common regular expressions to generate website click jumps
Use the validator verifier to verify
prop corresponds to the form field model field, which is required when using the validate method.
rules: {
age: [
{
validator: checkAge , type: "number", trigger: "change"},
]
},
If validator is used for verification,
the verification method needs to be in data and at the same level as return
var checkAge = (rules, value, callback) =>{
if (!value) {
return callback(new Error("年龄不可以为空"));
}
setTimeout(() => {
if (value == null && value == undefined && value == "") {
return callback(new Error("年龄不可以为空"));
}else if(value >= 150 || value <= 0 ){
return callback(new Error("年龄有误"));
}else {
return callback();
}
},100)
};
rules bound to form-item
Rules are not bound to from but to form-item; the checkAge test method needs to be written in methods: {}
<el-form :model="ruleForm" ref="ruleForm">
<el-form-item label="名称" prop="name"
:rules="[{ type: 'string',required: true,message: ‘名称必填’, trigger: 'blur'},{ validator: checkAge, trigger: 'blur' }]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
methods: {
checkAge(rules, value, callback){
if (!value) {
return callback(new Error("年龄不可以为空"));
}
setTimeout(() => {
if (value == null && value == undefined && value == "") {
return callback(new Error("年龄不可以为空"));
}else if(value >= 150 || value <= 0 ){
return callback(new Error("年龄有误"));
}else {
return callback();
}
},100)
}
}
If there is a required item *, it means that the required item is wrong
reference link
* The identification of the required items is incorrect, and the |* of the required items in the form will change every time. It may be that there are too many required items in the rules (the rules have 8 required checks, but the actual rendered from is only 3 must be filled in, and the others are hidden), and use v-if or v-show control components to hide in the form. Solution
1.
At this time, you can change the v-if of the page to v-show, or v-show. Change v-if, and try to see if you can solve the problem of the required verification mark confusion. It may be caused by the rendering mechanism of v-if and v-show (in Vue, we can use v-if and v- show to control the rendering of elements or templates. And v-if and v-show also belong to Vue's internal commonly used instructions (conditional rendering). The instructions mentioned here are directives, which refer to special commands with a prefix v-, instructions The value of is limited to a binding expression, and the responsibility of the instruction is to apply some special behavior to the DOM when the value of the expression changes. v-if generates or removes a in the DOM according to the value of the expression true or false element (or multiple elements), where v-if depends on the control DOM node, and v-show is dependent on the display attribute of the control DOM node. When the value passed in by v-show is true, the display of the corresponding DOM element The value is block or the like, and vice versa, when it is false, the value of display is none. That is, the user cannot see the display of the element, but its DOM element still exists.)
1. Continue to use v-if\v-show to control the hiding of components, cancel the required verification in fixed rules, or bind rules to form-item, and bind some non-public verifications directly to the form In -item, the verification binding is not performed through the rules of from.