应用场景

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