目录
- 1 前言
- 2 需求分析
- 3 具体实现
- 3.1 使用正则表达式来验证规则
- 3.2 在 Element UI 表单中的应用
- 4 总结
1 前言
你好，我是喵喵侠，在前端开发工作中，我们经常需要根据用户输入的内容进行验证，尤其在需要实名认证的场合，对姓名的验证尤为重要。然而，由于各种原因（比方说保护个人隐私），有时我们还需要接受匿名的输入。这就要求我们在验证姓名时具有较大的灵活性。在这篇文章中，我将以 Element UI 表单为例，介绍如何使用正则表达式实现这种灵活的姓名验证，希望能对你有所帮助。
2 需求分析
在我之前做的一个公司项目中，有一个工单系统，里面就遇到了姓名填写编辑存在数据匿名的情况。如果用户的信息是实名的，那么填写真实姓名，录入到系统没有问题；但有时候用户不愿透露真实姓名，只留下一个姓氏，或者完全不透露，这时候只能输入空，或者*代替。还有一种情况是，这个工单的原始数据，是从另外一个平台推送过来的，那边对信息做了匿名处理，到我们这边姓名就变成了类似张*这样的，这时候表单验证就不能简单的用是否是2-4个中文（按照常规大部分情况来说）来判断了。
那么拆解下要实现的功能点：
- 可以实现汉字姓名的验证；
- 如果是匿名，字符串的总长度限制是0-4位，星号*可出现在任意位置；
- 如果输入框的内容是空，也是可以的
3 具体实现
3.1 使用正则表达式来验证规则
基于上述需求，我们可以构建如下的正则表达式：
代码语言：javascript复制/^[u4e00-u9fa5*]{0,4}$/下面解释一下这个正则表达式的含义：
这个正则表达式 ^[u4e00-u9fa5*]{0,4}$/ 用于匹配实名的0-4位中文姓名或匿名姓名（包含星号*）。下面是这个正则表达式的详细解释：
^：表示匹配字符串的开始。这确保了正则表达式从输入字符串的开头开始匹配。[u4e00-u9fa5*]：这是一个字符类，它表示可以匹配一个汉字或星号*。u4e00-u9fa5：这个范围表示匹配任何汉字。Unicode字符集中的这个范围包含了所有汉字。*：这表示匹配星号字符。由于星号在正则表达式中具有特殊含义（作为重复限定符），所以这里直接将其放在字符类中，使其失去特殊含义，仅作为普通字符进行匹配。
{0,4}：这是一个重复限定符，它表示匹配前面的字符类（汉字或星号）0到4次。这意味着整个字符串可以是0到4个汉字或星号的任意组合。$：表示匹配字符串的结束。这确保了正则表达式在输入字符串的结尾处完成匹配。
综上所述，这个正则表达式允许以下类型的输入：
- 0到4个汉字，如
"花花"、"掌柜"、"不易"等。 - 包含星号的字符串，如
"花*"、"**"、"小雨*"、"番茄**"等。 - 空字符串，也视为合法输入。
这个正则表达式适用于同时处理实名和匿名姓名的情况，提供了较大的灵活性。
3.2 在 Element UI 表单中的应用
Element UI 是 Vue.js 的一套组件库，其中包含了丰富的表单组件，可以方便地实现表单的创建和验证。下面我以 Element UI 的el-form和el-form-item组件为例，展示如何应用正则表达式进行姓名验证。
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
const validateName = (rule, value, callback) => {
const reg = /^[u4e00-u9fa5*]{0,4}$/;
if (!reg.test(value)) {
callback(new Error("请输入有效的姓名"));
} else {
callback();
}
};
return {
form: {
name: "",
},
rules: {
name: [
{ required: true, message: "姓名只能包含中文或*", trigger: "blur" },
{ validator: validateName, trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("提交成功!");
} else {
console.log("提交失败!");
return false;
}
});
},
},
};
</script>在以上示例中，定义了一个名为 validateName 的验证函数，并将正则表达式作为核心验证逻辑。然后，在表单的规则中对输入的姓名字段应用该验证函数。这样，用户在输入姓名时，表单会根据正则表达式进行实时验证，确保输入内容符合要求。
4 总结
有时候单一的表单验证规则，无法满足业务实际需要，需要考虑的因素比较多。一方面前端开发需要对表单数据的合法性做控制，另一方面也要给用户合适的引导。通过这个项目的需求，我对表单验证的理解加深了一步，不光要考虑这个表单内容是新增的，而且要考虑你的表单数据来源，是来自于第三方，你需要基于第三方给的数据，进行二次编辑，这时候我不得不对原有的表单验证的规则进行兼容处理。也许在我这边某个表单项是必填，但从三方同步过来的数据，这个数据项就是缺失的，这种情况要么自己补全，要么针对这个来源放开验证。希望这篇文章能给你带来一点思考和帮助，有想法可以随时在评论区留言。
我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！
