UI 输入框验证的正则表达式大全：掌控输入，提升用户体验

2023-11-13 15:53:12

在现代 Web 开发中，用户界面 (UI) 的输入字段至关重要，它使用户能够与网站或应用程序交互并提供必要的信息。为了确保数据的完整性和准确性，对这些输入进行验证是至关重要的。正则表达式是一种强大的工具，可用于定义和匹配特定字符模式，非常适合用于输入验证。

本文旨在提供一个全面的正则表达式大全，适用于最常见的 <el-input> 输入限制，包括数字、电子邮件地址、电话号码、网址和自定义验证规则。这些正则表达式经过优化，可以在各种场景下提供可靠且有效的验证。

正则表达式概述

正则表达式是一种文本模式匹配语言，它使用特殊符号和语法来定义模式。通过将正则表达式与输入值进行匹配，我们可以确定输入是否符合预期模式。例如，以下正则表达式可以匹配任何有效的电子邮件地址：

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

<el-input> 输入限制正则表达式

数字

/^[0-9]+$/

邮箱地址

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

电话号码

/^((\+\d{1,2}-?)|(\(?\d{3}\)?)-?)?\d{3}-\d{4}$/

网址

/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/
amp;'\(\)\*\+,;=.]+$/

自定义正则表达式

/自定义正则表达式模式/

使用正则表达式进行输入验证

在 <el-input> 组件中使用正则表达式进行输入验证非常简单。以下示例演示如何验证输入的电子邮件地址：

<template>
  <el-input v-model="email" type="email" :rules="[{ validator: validateEmail, trigger: 'blur' }]">
    <template v-slot:suffix>
      <i class="el-icon-circle-check" v-if="email && validateEmail(email)"></i>
      <i class="el-icon-circle-close" v-else-if="email"></i>
    </template>
  </el-input>
</template>

<script>
  export default {
    data() {
      return {
        email: '',
      };
    },
    methods: {
      validateEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
      },
    },
  };
</script>