ant design vue 之 v-decorator
1.在 template 中直接使用required: true 设置必填, trigger: 'blur' 设置失去焦点触发校验<a-inputv-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]"/>2.在 script 中设置校验规则template 部分&
·
1.在 template 中直接使用
required: true
设置必填, trigger: 'blur'
设置失去焦点触发校验
<a-input
v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]"
/>
2.在 script 中设置校验规则
template 部分
<a-input
v-decorator="['password', validatorRules.password]"
/>
script 部分
data(){
return {
form: this.$form.createForm(this),
validatorRules: {
password : {//name与v-decorator中属性对应
initialValue: 123456,//初始值
rules: [
{ required: true, message: '请输入密码!'},//此处开启校验必填
{ min: 5, message: '长度不少于 5 个字符'}, // 长度校验
{ validator: this.validatePassword},//校验规则函数,
],
trigger: 'blur' // 触发方式
},
},
}
},
methods: {
validatePassword(rule, value, callback) {
}
}
3. 完整代码
<template>
<div class="login">
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
<a-form-item label="name">
<!-- 直接写检验规则 -->
<a-input
v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]"
/>
</a-form-item>
<a-form-item label="password">
<!-- 在script 里面定义更复杂的检验规则, -->
<a-input
v-decorator="['password', validatorRules.password]"
/>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" html-type="submit">
Login
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: 'login',
data(){
return {
form: this.$form.createForm(this),
validatorRules: {
password : {//name与v-decorator中属性对应
initialValue: 123456,//初始值
rules: [
{ required: true, message: '请输入密码!'},//此处开启校验必填
{ min: 5, message: '长度不少于 5 个字符'}, // 长度校验
{ validator: this.validatePassword},//校验规则函数,
],
trigger: 'blur' // 触发方式
},
},
}
},
created(){
// this.$nextTick(() => {
// this.form.setFieldsValue({name:'yyy',password: 123});
// })
},
mounted(){
this.form.setFieldsValue({name:'yyy',password: 123});
},
methods: {
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
},
validatePassword(rule, value, callback) {
}
}
}
</script>
注意:
确保使用 this.form.setFieldsValue({name:'yyy',password: 123})
设置值
或者 this.form.validateFields((err, values) => { });
获取值
之前
已经 this.$form.createForm(this)
如果在钩子函数里面使用 setFieldsValue 报类似错误
warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.
可以这样试下
this.$nextTick(() => {
this.form.setFieldsValue({name:'yyy',password: 123});
})
更多推荐
已为社区贡献2条内容
所有评论(0)