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 函数来限制输入框连续输入字符时验证函数的执行次数。

结论

Vue 中的正则表达式验证并不难，只需要了解 watch 和 computed 选项的使用就可以了。
如果要实现真正的实时验证，可以使用 debounce 函数来避免频繁的函数调用。
在实际应用中，我们还需要考虑更加完善的验证方案，例如使用 Element UI 中封装好的表单验证组件。