From基础表单如何在输入过程中校验?
前端技术:Vue + Ant-Design-Vue
场景模拟:网上有很多关于校验Form-Input的校验方法(都很不错~~)。突发奇想,想通过watch监听输入框的内容 实现校验过程。
效果展示:
实现代码:
// 输入框内容首先添加一个v-model实现双向数据绑定
//<a-form-item>元素上加入属性validateStatus(提示样式) help(提示内容)
<template>
<a-form :form="form"
:layout="formLayout"
:label-col="{ span: 1 }"
:wrapper-col="{ span: 6 }"
@submit="handleSubmit">
<a-form-item label="账号"
:validateStatus="filedNumStatus"
:help="filedNumHelp">
<a-input type="text"
v-model="filedNum"
v-decorator="['name', { rules: [{ required: true, message: '请输入账号' }] }]" />
</a-form-item>
<a-form-item label="密码"
:validateStatus="filedPwdStatus"
:help="filedPwdHelp">
<a-input type="password"
v-model="filedPwd"
v-decorator="['pwd', { rules: [{ required: true, message: '请输入密码' }] }]" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary"
html-type="submit">
Submit
</a-button>
</a-form-item>
</a-form>
</template>
--------------------------------------------------------------
// 在data里面属性值默认都为空
data () {
return {
formLayout: 'horizontal',
filedNum: '',
filedPwd: '',
filedNumStatus: '',
filedPwdStatus: '',
filedNumHelp: '',
filedPwdHelp: '',
form: this.$form.createForm(this, { name: 'coordinated' }),
};
},
--------------------------------------------------------------
// 上法宝 watch大法
//监听watch的变化(即输入内容的变化),
//当输入值的长度在<5的区间内就展示提示,相反则不展示
watch: {
filedNum (val) {
if (val.length < 5) {
this.filedNumStatus = 'error'
this.filedNumHelp = '必须大于5个字符'
} else {
this.filedNumStatus = ''
this.filedNumHelp = ''
}
}
},
//最后别忘了如果是登录注册功能,提交的时候也要把判断加上哦!!!
座右铭: 所谓底线,大概只有突破它的时候才能真正触摸到它,随之而来的,你内心看重什么,与过去相比改变了什么,为何而改变……一切都水落石出了。