Question

我真的是Vue的新手，在这个项目中，我正在使用电子邮件验证，然后在reg上使用VUE Script Data。当我打印出console.log(this.reg.test(this.email))时，当用户填写电子邮件输入字段时，它将正确验证为true或false。 NEXT按钮在真假情况下均保持禁用状态。 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返回布尔值，而不返回一个字符串。因此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

1 个答案: