应用场景

今天在闲逛各种网站的时候,在登录或注册页面会出现这样子的情况:
图片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
    4
    5
    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
<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组件库的哦