vue 验证表单

<input v-model="name" @blur="blurishow5" type="text" class="input" placeholder="请输入姓名" />
<div style="clear:both;"></div>
<div v-show="item.ishow5" class="titles">请输入姓名</div>
</li>
<li>
<span>身份证号：</span>
<input v-model="card" @blur="blurishow2" maxlength="18" type="text" class="input" placeholder="请输入身份证号" />
<div style="clear:both;"></div>
<div v-show="item.ishow2" class="titles">请输入正确的身份证号</div>
</li>
<li>
<span>年龄：</span>
<input v-model="age" @blur="blurishow6" type="number" class="input" placeholder="请输入年龄" />
<div style="clear:both;"></div>
<div v-show="item.ishow6" class="titles">请输入年龄</div>
</li>
<li>
<span>民族：</span>
<select placeholder="请选择民族" class="public-choice input" v-model="nation" @change="blurishow7">
<option :value="coupon.nation" v-for="(coupon, index) in couponsLists" :key="index">{{ coupon.nation }}</option>
</select>
<!-- <input v-model="nation" @blur="blurishow7" type="text" class="input" placeholder="请选择民族" /> -->
<div style="clear:both;"></div>
<div v-show="item.ishow7" class="titles">请选择民族</div>
</li>
<li style="position:relative;">
<span>手机号：</span>
<input v-model="phone" @blur="blurishow1" maxlength="11" type="number" class="input phones" placeholder="请输入手机号" />
<div v-show="numShow" class="huoqu" @click="changNums">获取验证码</div>
<div v-show="!numShow" class="huoqu">{{ num }}s后重新获取</div>
<div style="clear:both;"></div>
<div v-show="item.ishow1" class="titles">请输入正确的手机号</div>
</li>
<li>
<span>验证码：</span>
<input v-model="verification" @blur="blurishow8" type="text" maxlength="6" class="input" placeholder="请输入验证码" />
<div style="clear:both;"></div>
<div v-show="item.ishow8" class="titles">请输入正确的验证码</div>
</li>
<li>
<span>设置密码：</span>
<input v-model="password" @blur="blurishow3" type="text" maxlength="18" class="input" placeholder="6-18位的密码，只允许英文、数字" />
<div style="clear:both;"></div>
<div v-show="item.ishow3" class="titles">请输入账号密码</div>
</li>
<li>
<span>确定密码：</span>
<input v-model="passwords" @blur="blurishow4" type="text" maxlength="18" class="input" placeholder="6-18位的密码，只允许英文、数字" />
<div style="clear:both;"></div>
<div v-show="item.ishow4" class="titles">请再次输入账号密码</div>

item: {
ishow1: false,
ishow2: false,
ishow3: false,
ishow4: false,
ishow5: false,
ishow6: false,
ishow7: false,
ishow8: false,
ishow9: false
},

sure () {
//注册
this.blurishow1();
this.blurishow2();
this.blurishow3();
this.blurishow4();
this.blurishow6();
this.blurishow7();
this.blurishow5();
this.blurishow8();
if (this.uuId == "") {
Toast({
message: "请先获取验证码",
duration: 3000
});
}
if (!this.item.ishow4 &&
!this.item.ishow3 &&
!this.item.ishow2 &&
!this.item.ishow1 &&
!this.item.ishow5 &&
!this.item.ishow6 &&
!this.item.ishow7 &&
!this.item.ishow8 &&
this.uuId !== ""
){

去操作

}

</li>

blurishow1 () {
if (this.phone.trim().length !== 11 || this.phone.trim() == "") {
this.item.ishow1 = true;
} else {
this.item.ishow1 = false;
}
},
blurishow2 () {
if (this.card.length !== 18 || this.card == "") {
this.item.ishow2 = true;
} else {
this.item.ishow2 = false;
}
},
blurishow3 () {
if (this.password.length < 6 || this.password == "") {
this.item.ishow3 = true;
} else {
this.item.ishow3 = false;
}
},
blurishow4 () {
if (
this.passwords.length < 6 ||
this.passwords == "" ||
this.passwords !== this.password
) {
this.item.ishow4 = true;
} else {
this.item.ishow4 = false;
}
},
blurishow5 () {
if (this.name.length < 2 || this.name == "") {
this.item.ishow5 = true;
} else {
this.item.ishow5 = false;
}
},
blurishow6 () {
if (this.age.length == 0 || this.age == "") {
this.item.ishow6 = true;
} else {
this.item.ishow6 = false;
}
},
blurishow7 () {
if (this.nation.length == 0 || this.nation == "") {
this.item.ishow7 = true;
} else {
this.item.ishow7 = false;
}
},
blurishow8 () {
if (this.verification.length < 6) {
this.item.ishow8 = true;
} else {
this.item.ishow8 = false;
}
}