Vue 电子邮件验证未返回 true

Question

我是 Vue 的新手，对于这个项目，我使用电子邮件验证，然后在 VUE Script Data 上使用 reg。当我打印出 console.log(this.reg.test(this.email)) 时，当用户填写电子邮件输入字段时，它会正确验证为 true 或 false。 NEXT 按钮在 true 和 false 情况下都保持禁用状态。一旦 console.log(this.reg.test(this.email)) 为 true.

，我们能否启用按钮

查看

<div id="app">
  <h2>Todos:</h2>
  <input type="email" v-model="email" placeholder="enter email email address"/>
  <button v-bind:disabled="isDisableComputed">NEXT</button>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    email: '',
    reg: /^(([^<>()\[\]\.,;:\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,24}))$/
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  },
  
  computed: {
      isDisableComputed() {
      if(this.reg.test(this.email) == 'true'){
        console.log(this.reg.test(this.email));
        return false;

      }
      else{
        console.log(this.reg.test(this.email));
        return true;
      }

    },
    
   }

})

下面是我上传到JSFIDDLE上的代码

https://jsfiddle.net/ujjumaki/9es2dLfz/6/

Answer 1

查看 MDN: RegExp、RegExp.test return boolean，而不是 one string。所以 this.reg.test(this.email) == 'true' 永远是假的。

let regex = /^(([^<>()\[\]\.,;:\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,24}))$/

console.log("regex.test('test@test.com')      ==> ", regex.test('test@test.com'))
console.log("regex.test('test@test.com')=='true'  ==> ", regex.test('test@test.com') == 'true')
console.log("regex.test('test@test.com')      ==> ", regex.test('test@test@.com'))
console.log("regex.test('test@test@.com')=='true'  ==> ", regex.test('test@test@.com') == 'true')

所以使用 return !this.reg.test(this.email) 而不是像下面代码段中的计算属性=isDisableComputed 那样。

new Vue({
  el: "#app",
  data () {
    return {
      email: '',
      reg: /^(([^<>()\[\]\.,;:\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,24}))$/
    }
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  },
  computed: {
    isDisableComputed() {
        return !this.reg.test(this.email)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <input type="email" v-model="email" placeholder="enter email email address"/>
  <button :disabled="isDisableComputed">NEXT ({{isDisableComputed}})</button>
</div>

Vue 电子邮件验证未返回 true

Vue email validation is not returning true

javascript

email-validation

vue.js