Vue 正则表达式验证

当我们需要对用户输入的数据进行校验时，常用的方法莫过于正则表达式。在 Vue 中，我们可以通过 watch 监听数据变化并使用正则表达式来实现验证。

watch 监听数据变化

Vue 的 watch 选项可以用来监听数据的变化，语法如下：

new Vue({
  data: {
    inputVal: ''
  },
  watch: {
    inputVal: function (newVal, oldVal) {
      // 处理数据变化情况
    }
  }
})

我们可以在 watch 函数中执行验证逻辑，并将验证结果反馈给用户。

正则表达式验证

我们可以使用 JavaScript 内置的正则表达式对象 RegExp 来进行表单验证。以下是一个简单的示例，用正则表达式验证输入的电话号码是否正确：

<template>
  <div>
    <input type="text" v-model="phone" />
    <span v-if="!isValidPhone">输入的电话号码有误。</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ''
    }
  },
  computed: {
    isValidPhone() {
      return /^1[3-9]\d{9}$/.test(this.phone)
    }
  }
}
</script>

上面的代码通过计算属性 isValidPhone 来实现了验证逻辑，如果输入的电话号码格式有误，则在页面上显示错误提示。正则表达式 /^1[3-9]\d{9}$/ 用来验证手机号码是否合法。

实时验证

我们可以使用 debounce 函数来实现真正的实时验证，以减轻页面的负担。

<template>
  <div>
    <input type="text" v-model="phone" />
    <span v-if="!isValidPhone">输入的电话号码有误。</span>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      phone: ''
    }
  },
  computed: {
    debouncedIsValidPhone() {
      return debounce(() => {
        return /^1[3-9]\d{9}$/.test(this.phone)
      }, 500)
    },
    isValidPhone() {
      return this.debouncedIsValidPhone()
    }
  }
}
</script>

上面的代码使用了 lodash 库中的 debounce 函数来限制输入框连续输入字符时验证函数的执行次数。