我需要使用 vee-validate 和这个基本的正则表达式来验证美国电话号码 XXX-XXX-XXXX : (?:\d{3}-)\d{3}-\d{4}
。正则表达式本身可以正常工作,但不适用于 vee-validate,我不确定为什么。
标记
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|regex:^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$'" :class="{'input': true, 'is-danger': errors.has('phone_primary') }" class="input is-info" type="text" name='phone_primary' value="$phone_primary" placeholder="404-555-1212" size="15">
<span v-show="errors.has('phone_primary')" class="help is-danger">{{ errors.first('phone_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script>
Vue.use(VeeValidate);
new Vue({
el: '#app',
template: '#app',
data: {
phone_primary: null
}
});
</script>
</body>
</html>
正则表达式没有按预期工作,我做错了什么?