form model表单模板(ant)

<a-form-model
ref=“提交表单前选中.validate 以验证通过”
:model=“data中数据对象”
:rules=“验证总对象名”
v-bind="{labelCol: { span: 4 },wrapperCol: { span: 14 }}"水平布局
>

rules: {
验证数组名[
{ required: true, message: ‘请输入商品名称’, trigger: ‘blur’ }
],
验证数组名[
{ required: true, message: ‘请输入商品名称’, trigger: ‘blur’ }
],

}
// 表单 修改事件 打开瞬间不能过快赋值 否则会导致调用resetFields()无效
// 必须在表单打开时
this.KaTeX parse error: Expected 'EOF', got '}' at position 186: … }); }̲, resetForm…refs.ruleForm.resetFields();
},

// 不建议使用 另一种表单 模板 最简单的校验
// 通过监听实时校验提示 点击按钮时采用监听时条件判断 满足校验时 才可进行后续操作

data(){ return{
fieldA: “”,
fieldAStatus: “”,
fieldAHelp: “”
}}

watch: {
fieldA(val) {
if (val.length <= 5) {
(this.fieldAHelp = “必须大于5个字符”), (this.fieldAStatus = “error”);
} else {
(this.fieldAHelp = “”), (this.fieldAStatus = “”);
}
}
},

handleSubmit() {
if (this.fieldA.length <= 5) {
(this.fieldAHelp = “必须大于5个字符”), (this.fieldAStatus = “error”);
// fieldAHelp简单灵活的手动添加校验信息
// fieldAStatus信息的样式 ‘success’, ‘warning’, ‘error’, ‘validating’。
// validating 无样式
} else {
console.log({ fieldA: this.fieldAHelp, fieldB: this.fieldAHelp });
}
}

//不同点 饿了么中 使用双向绑定 与ref validate中只有一个值
login() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …} = await this.http.post(‘login’, this.loginForm)
if (res.meta.status !== 200) return this.$message.error{(}^{\prime }登录失{败}^{\prime })this.$message.success(‘登录成功’)
window.sessionStorage.setItem(‘token’, res.data.token)
this.$router.push(’/home’)
})
}
//不同点 蚂蚁中 使用 v-decorator (双向绑定 与ref都在其中) validateFields有两个值
handleSubmit() {
//this.form 在data中return外定义
this.form.validateFields((err, values) => {
if (!err) {
console.log(values);
// values 具有form的每条input信息
}
});