如何检查电子邮件是否存在于 vuetifyjs 规则中答案

【问题标题】：How to check email is exist in vuetifyjs rules如何检查电子邮件是否存在于 vuetifyjs 规则中
【发布时间】：2021-06-02 07:21:31
【问题描述】：

我正在使用带有规则的 vuetify 表单验证我在异步验证电子邮件时遇到问题

此规则代码：

data () {
      return {
        rules: {
          email: value => {
            const pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(value) || 'Invalid e-mail.'
          },
          mailExist: value => (this.emailExists(value) === 'valid Email Address') || 'Error'
        },
      }
    },

运行此方法的代码以确保 mailExist 验证：

methods: {
      emailExists: function (val) {
        if (val !== '') {
          axios.get(`email_validation.php?empemail=${val}`)
            .then(response => {
              console.log(response.data)
              return response.data
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
},

结果总是“错误”，但来自 api 的响应是 True，如图所示： Picture

PHP API 的代码：

<?php

require "../includes/DbOperations.php";

$result = array();

if ($_SERVER['REQUEST_METHOD'] == 'GET') 
{
    if (isset($_GET['empemail'])) 
    {
        $db = new DbOperations();
        if (filter_var($_GET['empemail'], FILTER_VALIDATE_EMAIL)) 
        {
            if ($db->email_validation($_GET['empemail'])) 
            {
                $result = "This Email Already Exist";
            }
            else 
            {
                $result = "valid Email Address";
            }
        } 
        else 
        {
            $result = " Invalid Email Address";
        }
    }
    else 
    {
        $result = "Invalid Inputs";
    }
}
else
{
    $result = "You Do Not Have Permission";
}

echo json_encode($result);

谢谢你..

【问题讨论】：

标签： vue.js vuetify.js email-validation validationrules

【解决方案1】：

我这样解决了问题..

在电子邮件字段中：

<v-text-field
 label="Email Address"
 type="email"
 class="purple-input"
 :rules="[rules.email, rules.existingMail]"
 v-model="email"
 :messages="mailMessage"
 @keyup="emailExists()"
/>

数据和规则对象：

data () {
      return {
        email: '',
        rules: {
          required: value => !!value || 'Required.',
          email: value => {
            const pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(value) || 'Invalid e-mail.'
          },
          existingMail: () => true || this.mailMessage
        },
        mailMessage: '',
      }
    },

在方法中：

methods: {
      emailExists: function () {
        if (this.email !== '') {
          axios.get(`email_validation.php?empemail=${this.email}`)
            .then(response => {
              if (response.data !== 'valid Email Address') {
                this.mailMessage = response.data
                this.rules.existingMail = false
              } else {
                this.mailMessage = ''
                this.rules.existingMail = true
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
}

也许有更好的方法来解决这个问题，但我的方法效果很好..

【讨论】：