在 JavaScript 中验证名字

在 Web 应用程序中，验证用户输入的数据是非常重要的。在这个例子中，我们将介绍如何验证一个人的名字是否有效，对于无效名字，我们也将提示错误信息。

步骤

1. 创建一个输入框，用于输入名字。

   <label for="name">名字:</label>
   <input type="text" id="name" name="name">
   

2. 创建一个按钮，用于触发验证名字的函数。

   <button onclick="validateName()">验证名字</button>
   

3. 编写一个函数，用于验证名字是否有效。

   function validateName() {
       // 获取输入框中的名字
       const name = document.getElementById("name").value;
   
       // 定义名字验证的正则表达式
       const nameRegex = /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/;
   
       // 使用正则表达式匹配名字
       if (nameRegex.test(name)) {
           // 名字有效，清除错误消息
           document.getElementById("error").innerHTML = "";
       } else {
           // 名字无效，显示错误消息
           document.getElementById("error").innerHTML = "无效的名字！";
       }
   }
   

4. 在页面上创建一个容器，用于显示错误消息。

   <div id="error"></div>
   

正则表达式解析

下面是用于验证名字的正则表达式解析：

• /^: 匹配字符串的开始
• [a-zA-Z]+: 匹配一个或多个英文字母
• (: 开始一个子组
• [',. -]: 匹配一个逗号、句号、空格或破折号
• [a-zA-Z ]: 匹配一个英文字母或空格
• )?: 子组可选
• [a-zA-Z]*: 匹配零个或多个英文字母
• $: 匹配字符串的结尾

结论

现在，每次用户点击“验证名字”按钮时，都会对用户输入的名字进行验证，并对无效的名字显示错误消息。这样，我们就可以确保输入的名字是有效的。