ant-desigin-vue中form表单的使用解读

<template>
  <a-form @submit="handleOk" :form="form">
    // :form="form" 必须优先注册
    <!-- 客户姓名 -->
    <a-form-item
        :labelCol="labelCol" // 排列样式
        :wrapperCol="wrapperCol"
        label='客户姓名：'
      >
      <a-input
        v-decorator="[
          'name', // 给表单赋值或拉取表单时，该input对应的key
          {rules: [{ required: true, message: '请输入客户名称!' }]}
        ]"
        placeholder="请输入客户名称"/>
    </a-form-item>
  </a-form>
</template>
export default {
  data() {
    return {
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
    }
  }
}

this.form.validateFields((err, values) => {
  if (err) {
    // 这里做逻辑处理
    console.log(values) // { name: '' }
  }
}

 this.form.setFieldsValue({
   name: '设置值'
 })

<a-form-item
  v-bind="formItemLayout"
  label="E-mail"
>
  <a-input
    v-decorator="[
      'email',
      {
        rules: [{
          type: 'email', message: 'The input is not valid E-mail!',
        }, {
          required: true, message: 'Please input your E-mail!',
        }]
      }
    ]"
  />
</a-form-item>

<a-form-item
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label='手机：'
>
<a-input
  type="number"
  v-decorator="[
    'phone',
    {
      rules: [
        { required: false, message: '请输入手机号码!' },]
    },
  ]"
  @blur="validatePhoneBlur"
  placeholder='请输入手机号码' />
</a-form-item>
// 校验事件
validatePhoneBlur(e) {
  const validatePhoneReg = /^1\d{10}$/
  if (e.target.value && !validatePhoneReg.test(e.target.value)) {
    const arr = [{
      message: '您输入的手机格式不正确!',
      field: 'phone',
    }]
    this.form.setFields({ phone: { value: e.target.value, errors: arr } })
  }
},

const validateCode = (rule, value, callback) => {
	if (value == '') {
		callback(new Error('请输入字典编号'));
	} 
    else if(!/^[A-z0-9-_]+$/.test(value)){
		callback(new Error('请输入正确格式编号'));
	}
	else if(value.length>32){
		callback(new Error('最大长度为 32 个字符'));
	}
};

const validateCode = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请输入字典编号'));
  } 
  else if(!/^[A-z0-9-_]+$/.test(value)){
    callback(new Error('请输入正确格式编号'));
  }
  else if(value.length>32){
    callback(new Error('最大长度为 32 个字符'));
  }
  else{
    callback()
  }
};

validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          }
          duplicateCheck(params).then(res => {
            if (res.success) {
              callback()
            } else {
              callback('手机号已存在!')
            }
          })
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    }

Money: { rules: [{ required: true, type: 'number', message: '请输入金额！', trigger: 'change' }] },