标签：rules 表单 ant trigger design model true message change

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

        ]
      }
    }
  },

标签：rules,表单,ant,trigger,design,model,true,message,change
来源： https://blog.csdn.net/weixin_44043580/article/details/123038099

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。