import { FormModel } from 'ant-design-vue'; Vue.use(FormModel);
,: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>
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' } ] }
this.$refs.formref.resetFields()
this.form
定义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'}, ] } } },