vue antd 表单校验/表单事件带参数

表单校验

 <a-form-model :form="form"               
 ref="ruleForm"              
 :rules="rules"                 
 :model="modalForm">    
 <a-form-model-item
 :label-col="formItemLayout.labelCol"                           :wrapper-col="formItemLayout.wrapperCol"                 
 prop="name"                       
 label="名称">        
 <a-input placeholder='请输入名称'              
 @change="changePackage"              
 v-model="modalForm.name"             
 :disabled='type==3' />      
 </a-form-model-item>
 <a-form-model-item
   :label-col="formItemLayout.labelCol"                           :wrapper-col="formItemLayout.wrapperCol"                   
    prop="status"                   
  label="状态">     
    <a-select @change="changeStatus"           
   v-model="modalForm.status">       
        <a-select-option value="1">     
        开启          
        </a-select-option>        
        <a-select-option value="2">      
        关闭        
        </a-select-option>       
        </a-select>    
        </a-form-model-item>
        <a-form-model-item 
        :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary"
      @click="onSubmit">
        Create
      </a-button>
    </a-form-model-item>  
    </a-form-model>

在a-form-model标签组件上绑定 :rules='rules'

  data() { 
  let validatePackageName = (rule, value, callback) => {  
  if (value === '') { 
  callback(new Error('请输入套餐名'));   
  } else {  
  callback();  
  }   
  };  
  let validateStatus = (rule, value, callback) => {  
  if (value === '') {    
  callback(new Error('请选择套餐状态'));   
  } else {  
  callback();   
  }    };  
  return {  
  formItemLayout: {//页面UI样式值    
  labelCol: { span: 7 },   
  wrapperCol: { span: 15 },    
  },    
  form: this.$form.createForm(this, { name: 'dynamic_rule' }), 
  rules: {//校验规则    
  name: [{ validator: validatePackageName, trigger: 'change' }],//trigger是触发事件，此处为change事件     
  status: [{ validator: validateStatus, trigger: 'change' }],//此处的status对应a-form-model-item标签的prop="status"      },   
  modalForm: {//对应绑定的数据     
  packageName: '',    
  status: '',   
  },  
  }  
      
  },
methods:{
onSubmit(){
      this.$refs.ruleForm.validate(valid => {   
      if (valid) {       
      console.log('校验通过，继续执行提交代码')    
      } else {         
      console.log('error !!');      
      return false;       
      }     
      });}
}

input change事件带多个参数

input官网案例中，一个input change时间绑定一个事件function(e){} 如果有多个input便要写多个事件，便会造成代码冗余 如下写法，一个事件带多个参数

        <a-form-model-item :label-col="formItemLayout.labelCol"
                           :wrapper-col="formItemLayout.wrapperCol"
                           prop="packageName"
                           label="用户名称">
          <a-input placeholder='请输入用户名称'
                   @change="e => changeInput(e,'packageName')"
                   v-model="modalForm.packageName" />
        </a-form-model-item>
                <a-form-model-item :label-col="formItemLayout.labelCol"
                           :wrapper-col="formItemLayout.wrapperCol"
                           prop="packagePrice"
                           label="价格">
          <a-input placeholder="请输入价格"
                   @change="e => changeInput(e,'packagePrice')"
                   v-model.number="modalForm.packagePrice"
                   type="number">
            <span slot="addonAfter">美元</span>
          </a-input>
        </a-form-model-item

@change="e => changeInput(e,'packageName')"是这段代码的要点，第二个参数为自定义参数，可在事件中获取

    //input修改事件
    changeInput(v, name) {
    //v.target.value取值input输入的值，name是自定义参数
      this.modalForm[name] = v.target.value
    },