提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：2024年十五届省赛职业院校组真题第四题：多表单校验
题目：
需要考生作答的代码段如下：
// TODO：待补充代码
const rules = reactive({
})题目要求：
完善 `index.html` TODO 部分，实现多表单校验功能。
两个表单校验规则（`rules`）如下：
- 姓名：必填。规则：只能输入汉字。提示：请输入姓名，只能输入汉字。
- 性别：必填。提示：请选择性别。
- 年龄：必填。提示：请输入年龄。
- 是否参加过编程比赛：必填。提示：请选择是否参加过编程比赛。
- 是否有过创业经历：必填。提示：请选择是否有过创业经历。答案：
const rules = reactive({
name: {
required: true,
validator: (rule, value, callback) => {
if (value === '') {
callback('请输入姓名')
} else if (/[^\u4e00-\u9fa5]/g.test(value)) {
callback('只能输入汉字')
} else {
callback()
}
}
},
sex: {
required: true,
message: '请选择性别'
},
age: {
required: true,
message: '请输入年龄'
},
isCompetition: {
required: true,
message: '请选择是否参加过编程比赛'
},
isEntrepreneurship: {
required: true,
message: '请选择是否有过创业经历'
}
})拓展学习
本题作者想说
目标
制定规则，使其对表单进行校验
思路
观察代码
观察题目，题目中给出了具体要求的表单校验规则，还有具体的配置说明
因此我们知道通过我们自己对参数进行自定义的配置，就可以实现表单的校验
我们现在要做的就是了解配置参数
required为“是否必填”，类型为布尔类型，表明通过控制布尔值来控制是否必填
message为“提示信息”，类型为字符串类型，表明通过控制字符串来控制提示信息
trigger为“触发方式”，类型为字符串类型，表明通过控制字符串来控制触发方式
validator为“自定义校验规则”，类型为函数类型，表明通过控制函数来控制自定义校验规则
两个表单校验规则（`rules`）如下：
- 姓名：必填。规则：只能输入汉字。提示：请输入姓名，只能输入汉字。
- 性别：必填。提示：请选择性别。
- 年龄：必填。提示：请输入年龄。
- 是否参加过编程比赛：必填。提示：请选择是否参加过编程比赛。
- 是否有过创业经历：必填。提示：请选择是否有过创业经历。
**rules 校验规则配置项说明**
| 参数 | 说明 | 类型 |
| ----------- | ------------------ | --------------- |
| `required` | 是否必填 | `boolean` |
| `message` | 提示文案 | `string` |
| `trigger` | 验证逻辑的触发方式 | `blur`/`change` |
| `validator` | 自定义校验规则 | `boolean` |
之后我们在观察代码，在HTML中，通过“prop="？"”来绑定数据
我们要做的就是将这个绑定数据进行规则限制
题目中要求“姓名”，“性别”，“年龄”，“是否参加过编程比赛”，“是否有过创业经历”五个表单需要自定义校验规则
通过找到prop，有prop="name"，prop="sex"，prop="age"，prop="isCompetition"，prop="isEntrepreneurship"五个对应的值
后续js代码段中有const rules = reactive({})定义了一个规则空对象
我们要做的就是将这个空对象进行赋值
分析逻辑
对空对象进行规则赋值，就是将prop的值一一与题目中所要求的值进行对应规定
例如，定义姓名时，要求必填。在定义时，将参数required定义为true
要求，规则：只能输入汉字。提示：请输入姓名，只能输入汉字。在定义时需要使用validator以传参的方式再结合if判断语句进行定义
同理，性别，年龄，是否参加过编程比赛，是否有过创业经历，也需要进行同样的操作
设计代码
const rules = reactive({
name: {
required: true,
validator: (rule, value, callback) => {
if (value === '') {
callback('请输入姓名')
} else if (/[^\u4e00-\u9fa5]/g.test(value)) {
callback('只能输入汉字')
} else {
callback()
}
}
},
sex: {
required: true,
message: '请选择性别'
},
age: {
required: true,
message: '请输入年龄'
},
isCompetition: {
required: true,
message: '请选择是否参加过编程比赛'
},
isEntrepreneurship: {
required: true,
message: '请选择是否有过创业经历'
}
})注意
本题的本质就是对prop绑定值进行规则限制，需要我们自己去进行定义规则
还有就是题目中给出属性与规则，一一对应即可，特殊规则需要使用正则表达式与传参与回调函数等方法连用
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！
