应用场景

今天在闲逛各种网站的时候,在登录或注册页面会出现这样子的情况:
图片1

但我就好奇这种没输入信息它在下方就会弹出对应的信息,这中间是否有什么规则在约束呢?

编程环境

  1. 编译器: vscode
  2. 框架:vue
  3. UI:element ui
  4. 打包工具: npm

源码讲解

官方文档

form 组件

内容

看到官方提供的API中,可以看到又这样一个参数:rules
图片2

这个属性对应的是一个对象,在<script></sript> 标签中可以这样子去定义:
图片3

解释一下:

  1. rules对象中的对象分别对应表单中各个内容的属性值,即 prop 指向的变量
  2. 这个子对象是一个数组,表示会一 一匹配数组的每一条规则,全部匹配才会返回,这个规则可以是自定义的函数或者官方提供的。

rules 对象支持属性

属性名 说明
required 字段是否为必填项
min 字段的最小值或最小长度
max 字段的最大值或最大长度
type 设置字段的数据类型,例如 'email''url''number'
pattern 设置字段的正则表达式模式
validator 自定义验证函数,用于执行复杂的验证逻辑
trigger 触发验证的事件,默认是 'blur',也可以是 'change''input'
message 验证失败时显示的错误消息

两种显示信息方式

  1. 通过message
    1
    2
    3
    rules: {
    pass: [{ validator: validatePass, trigger: 'blur', message: '请输入密码' }];
    }
  2. 通过回调函数callback()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    data() {
    var checkCode = (rule, value, callback) => {
    if (!value) {
    return callback(new Error('验证码不能为空'));
    }
    callback();
    };
    }
    return{
    rules: {
    pass: [
    { validator: validatePass, trigger: 'blur'}
    ],
    }
    }

源码

最后附上本次测试的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<div class="form">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item
label="密码"
prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item
label="确认密码"
prop="checkPass">
<el-input
type="password"
v-model="ruleForm.checkPass"
autocomplete="off"
placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item
label="验证码"
prop="code">
<el-col class="code-col">
<el-input
v-model.number="ruleForm.code"
style="width:140px"
placeholder="输入验证码"></el-input>
<img
src="http://demo.ruoyi.vip/captcha/captchaImage?type=math"
alt=""
width="60" />
</el-col>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="submitForm('ruleForm')"
>提交</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>
export default {
data() {
var checkCode = (rule, value, callback) => {
if (!value) {
return callback(new Error('验证码不能为空'));
}
callback();
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
code: '',
},
rules: {
pass: [{ validator: validatePass, trigger: 'blur', message: '123' }],
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
code: [{ validator: checkCode, trigger: 'blur' }],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>

<style scoped lang="scss">
.form {
width: 300px;
& .code-col {
display: flex;
gap: 16px;
height: 30px;
}
}
</style>

注意:上面代码是已经引入element ui组件库的哦