ant design a-form-model使用

本文主要是介绍ant design a-form-model使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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'},

        ]
      }
    }
  },

这篇关于ant design a-form-model使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！