前端表单案例：实现用户姓名实名或匿名表单填写合法性验证功能

目录

• 1 前言
• 2 需求分析
• 3 具体实现
  • 3.1 使用正则表达式来验证规则
  • 3.2 在 Element UI 表单中的应用
• 4 总结

1 前言

你好，我是喵喵侠，在前端开发工作中，我们经常需要根据用户输入的内容进行验证，尤其在需要实名认证的场合，对姓名的验证尤为重要。然而，由于各种原因（比方说保护个人隐私），有时我们还需要接受匿名的输入。这就要求我们在验证姓名时具有较大的灵活性。在这篇文章中，我将以 Element UI 表单为例，介绍如何使用正则表达式实现这种灵活的姓名验证，希望能对你有所帮助。

2 需求分析

在我之前做的一个公司项目中，有一个工单系统，里面就遇到了姓名填写编辑存在数据匿名的情况。如果用户的信息是实名的，那么填写真实姓名，录入到系统没有问题；但有时候用户不愿透露真实姓名，只留下一个姓氏，或者完全不透露，这时候只能输入空，或者*代替。还有一种情况是，这个工单的原始数据，是从另外一个平台推送过来的，那边对信息做了匿名处理，到我们这边姓名就变成了类似张*这样的，这时候表单验证就不能简单的用是否是2-4个中文（按照常规大部分情况来说）来判断了。

那么拆解下要实现的功能点：

1. 可以实现汉字姓名的验证；
2. 如果是匿名，字符串的总长度限制是0-4位，星号*可出现在任意位置；
3. 如果输入框的内容是空，也是可以的

3 具体实现

3.1 使用正则表达式来验证规则

基于上述需求，我们可以构建如下的正则表达式：

/^[\u4e00-\u9fa5*]{0,4}$/

下面解释一下这个正则表达式的含义：

这个正则表达式 ^[\u4e00-\u9fa5*]{0,4}$/ 用于匹配实名的0-4位中文姓名或匿名姓名（包含星号*）。下面是这个正则表达式的详细解释：

1. ^：表示匹配字符串的开始。这确保了正则表达式从输入字符串的开头开始匹配。
2. [\u4e00-\u9fa5*]：这是一个字符类，它表示可以匹配一个汉字或星号*。
   • \u4e00-\u9fa5：这个范围表示匹配任何汉字。Unicode字符集中的这个范围包含了所有汉字。
   • *：这表示匹配星号字符。由于星号在正则表达式中具有特殊含义（作为重复限定符），所以这里直接将其放在字符类中，使其失去特殊含义，仅作为普通字符进行匹配。
3. {0,4}：这是一个重复限定符，它表示匹配前面的字符类（汉字或星号）0到4次。这意味着整个字符串可以是0到4个汉字或星号的任意组合。
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腾讯技术创作特训营最新征文，快来和我瓜分大奖！