备赛蓝桥杯之第十五届职业院校组省赛第四题：多表单校验

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：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绑定值进行规则限制，需要我们自己去进行定义规则

    还有就是题目中给出属性与规则，一一对应即可，特殊规则需要使用正则表达式与传参与回调函数等方法连用

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！