antd-design-vue

表单验证

<a-input
                placeholder="数字，整数"
                @change="changeInput"
                replace
                allowClear
                v-decorator="[
                  'paramVersion',
                  {
                    rules: [
                                { required: true, message: '请输入版本号！' },
                                //自定义校验
                                {validator: handlePass}
                                ],
                    initialValue: uploadForm.inputMaxVal //默认值
                  },
                ]"
              />

data（）{
    return{
    
    
    }
}

methods:{
    handlePass(rule,value,callback){
      var isexist = this.tableList.find(item=>{
        return item.vehParamCalibrations.paramVersion == value;
      })
      if(isexist){
        callback('版本号重复！')
      }
      callback();
    },
}

a-form-model

需要注意的点：
1、有ref
2、绑定model属性，定义data变量
3、在data里定义rules（rules是一个对象）
4、prop里面的属性和rules对应起来

<a-form-model
//绑定的数据
        :model="form"
        ref="form"
        :rules="rules"
        class="demo-ruleForm"
      >
      <a-form-model-item prop="username" >
          <a-input
            @keyup.enter.native="login"
            prefix-icon="el-icon-my-user"
            placeholder="账户"
            key="login-user-name"
            :max-length="20"
            allowClear
            v-model="form.username"
          >
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="password">
          <a-input-password
            type="password"
            prefix-icon="el-icon-my-pwd"
            placeholder="密码"
            @keyup.enter.native="login"
            :max-length="16"
            key="login-pwd"
            allowClear
            v-model="form.password"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input-password>
        </a-form-model-item>
        
        <a-form-item>
          <a-button class="login-button" :loading="loading" type="primary" @click="login">登&nbsp;&nbsp;录</a-button>
          <!-- <el-button @click="resetForm">重置</el-button> -->
        </a-form-item>
</a-form-model>
data(){
    return{
        form: {
            username: '',
            password: ''
      },
      rules:{
          username:[
              { required: true, message: 'Please input Activity name', trigger: 'blur' }, 
              { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
          ],
          password:[
               { required: true, message: 'Please input Activity name', trigger: 'blur' }, 
              { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
          ]
      }
    }
}


methods:{
    login(){
        this.$refs.form.validate(valid => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } });
    }
}

a-form

需要注意的点：
1、绑定form属性，在data里添加  form: this.$form.createForm(this, { name: 'coordinated' })

<a-form 
    :form="form" 
    :label-col="{ span: 5 }" 
    :wrapper-col="{ span: 12 }"  
    @submit="handleSubmit"> 
    <a-form-item label="Note"> 
        <a-input 
            v-decorator="['note', { 
                                    rules: [{ required: true, message: 'Please input your note!' }],
                                     initialValue: uploadForm.inputMaxVal //默认值
                                    }]" /> 
   </a-form-item>   
</a-form>

data(){
    return{
       
    }
}
methods:{
    handleSubmit(e) {
        e.preventDefault(); 
        this.form.validateFields((err, values) => { 
            if (!err) { console.log('Received values of form: ', values); } 
            }); 
    },
}