宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

一、在线验证

在线正则验证是一种非常方便的工具，可以帮助我们快速验证正则表达式是否符合我们的预期。一些常用的在线正则验证网站包括：

  • Regex101：https://regex101.com/
  • RegExr：https://regexr.com/
  • Regexr：https://regexr.com/

这些网站都提供了类似的功能，可以输入正则表达式并进行验证。在验证结果中，我们可以看到匹配的文本和匹配到的位置，非常方便。

二、input正则验证

在表单验证中，我们经常需要对用户输入的内容进行正则表达式验证。在input元素中，我们可以使用pattern属性来指定我们所需要的正则表达式。

  
    <input type="text" name="username" pattern="[a-zA-Z0-9_-]{3,16}" required>

上面的代码中，我们指定了一个正则表达式，用来验证用户名。这个正则表达式限定了用户名只能包含字母、数字、下划线和短横线，并且长度在3到16个字符之间。如果用户输入的内容不符合这个正则表达式，就会在提交表单时出现提示信息。

三、正则在线验证

除了使用input的pattern属性进行正则表达式验证之外，我们还可以使用JavaScript来进行验证。在JavaScript中，我们可以使用RegExp对象来创建正则表达式，并使用test()方法来判断一个字符串是否匹配正则表达式。

  
    const regExp = /[a-zA-Z0-9_-]{3,16}/;
    const username = 'john_doe';
    if (regExp.test(username)) {
      console.log('用户名格式正确');
    } else {
      console.log('用户名格式错误');
    }

上面的代码中，我们使用RegExp对象创建了一个正则表达式，用来验证用户名的格式。然后使用test()方法对用户名进行验证。如果用户名符合正则表达式，就会输出“用户名格式正确”，否则输出“用户名格式错误”。

四、正则验证邮箱

验证邮箱的正则表达式需要考虑到一些复杂情况。比如，邮箱中可能包含大小写字母、数字、点号、“+”号、“-”号、“_”号等字符。以下是一个简单的正则表达式，可以用来验证大多数邮箱地址：

  
    const regExp = /^[w-.]+@([w-]+.)+[w-]{2,4}$/;
    const email = 'john_doe@gmail.com';
    if (regExp.test(email)) {
      console.log('邮箱格式正确');
    } else {
      console.log('邮箱格式错误');
    }

上面的代码中，我们使用正则表达式验证了一个邮箱地址。如果邮箱符合正则表达式，就会输出“邮箱格式正确”，否则输出“邮箱格式错误”。

五、js正则验证手机号

验证手机号的正则表达式也比较复杂。以下是一个简单的正则表达式，可以用来验证中国大陆的手机号：

  
    const regExp = /^1[3-9]d{9}$/;
    const phoneNumber = '13812345678';
    if (regExp.test(phoneNumber)) {
      console.log('手机号格式正确');
    } else {
      console.log('手机号格式错误');
    }

上面的代码中，我们使用正则表达式验证了一个手机号。如果手机号符合正则表达式，就会输出“手机号格式正确”，否则输出“手机号格式错误”。

六、vue正则验证

在Vue项目中，我们可以使用vuelidate库来进行表单验证。vuelidate库使用了validators对象来实现各种验证规则，包括正则表达式验证。

  
    import { required, email, minLength } from 'vuelidate/lib/validators'
    export default {
      data () {
        return {
          email: '',
          password: ''
        }
      },
      validations: {
        email: { required, email },
        password: { required, minLength: minLength(6) }
      }
    }

上面的代码中，我们使用了vuelidate库对表单进行了验证。在validations对象中，我们指定了两个验证规则，用来验证邮箱和密码。其中，email规则使用了email验证器来进行邮箱格式验证。

七、elementui正则验证

在ElementUI库中，也包含了一些正则表达式验证规则，可以用来对表单进行验证。

  
    
      
        邮箱
        
      
    
    <script>
      export default {
        data () {
          return {
            email: ''
          }
        },
        methods: {
          handleSubmit () {
            console.log('邮箱：', this.email)
          }
        },
        validations: {
          email: {required, email}
        }
      }
    </script>

上面的代码中，我们使用了ElementUI的el-input和el-form-item组件来创建一个带有标签的输入框。然后在validations对象中指定了email规则，用来验证输入框中的内容是否是一个合法的邮箱地址。