正则邮箱校验

最新推荐文章于 2024-11-17 21:03:28 发布

原创最新推荐文章于 2024-11-17 21:03:28 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

这篇博客展示了如何在Vue.js中实现一个简单的电子邮件输入验证。通过使用`v-text-field`组件创建输入框，并结合自定义的校验规则`isTrueEmail`，确保用户输入的邮箱地址符合指定的正则表达式格式。博客内容涵盖了前端表单验证的基本原理和实践应用。

<v-row align="center">
 <v-col cols="3">
   <v-subheader> 电子邮件 </v-subheader>
 </v-col>
 <v-col cols="9">
   <v-text-field
     class="border_styleset"
     v-model="emailaddress"
     required
     :rules="rules.isEmail"
   ></v-text-field>
 </v-col>
</v-row>

export default {
  name: "AccountEditor",
  data() {
    let isTrueEmail = (value) => {
      let reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
      return reg.test(value);
    };
    return {
      rules: {
        notNullRules: [(v) => !!v || "此项为必填项"],
        isEmail: [(v) => isTrueEmail(v) || "不符合邮箱规则"],
      },
      valid: true,
      emailaddress: ""
    };
  },
}