1.首先要注册使用FormModel,在main.js文件中导入配置
import { FormModel } from 'ant-design-vue';
Vue.use(FormModel);
2.使用a-form-model,注意使用:model 来绑定整个表单的数据,使用:rules来绑定整个表单的校验
,:rules必须配合prop使用才会使表单校验生效
<a-form-model @submit="handleSubmit" :model="form" ref="formref" class="form" :rules ="rules">
<a-form-model-item label="仓库名" prop="name1">
<a-input v-model ="form.name1" />
</a-form-model-item>
</a-form-model>
3.表单校验,正则校验
form: {
name1: ''
},
rules:{
name1: [
{ required: true, message: 'Please input Activity name', trigger: 'change' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' }
],
name2: [
{ required: true, message: 'Please input Activity name',pattern: new RegExp(/^(?!(\s+$))^[\w\s]+$/), trigger: 'change' }
]
}
4.表单清空数据
this.$refs.formref.resetFields()
5.获取表单数据
this.form
6.表单自定义校验
定义validator 属性
rules:{
name1: [
{required: true ,validator: regTest,trigger: 'change'},
]
}
编写regTest 方法
data () {
const regTest = (rule, value, callback) =>{
if (!value) {
callback(new Error('请输入手机号!'))
} else {
if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确!'))
} else {
callback()
}
}
}
return {
rules:{
name1: [
// { required: true, message: 'Please input Activity name', trigger: 'change' },
// { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' },
{required: true ,validator: regTest,trigger: 'change'},
]
}
}
},