前面我们把文本框验证的错误提示部分封装到了validate.js
插件中。
还不够彻底,我们应该把文本框也封装尽量,弄成子组件的形式。
1.这是用户名文本框,原本是在user-name.vue
组件中的
input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
2.我们要做到在user-name.vue
只使用组件的形式
<validate-text></validate-text>
3.下面就到validate.js
中看看,是怎么实现的
// 验证文本框,自带组件
Vue.component("validate-text",{
template: '<div><input type="text" class="form-control" v-model="textValue" />' + '<label v-if="showErrorLabel" class="label label-danger">用户名不合法</label></div>',
data(){
return{textValue:""}
},
// 计算属性
computed:{
showErrorLabel(){
if(/\w{6,20}/.test(this.textValue) || this.textValue == ""){
// 验证通过,不提示错误
return false;
}
return true;
}
}
})