iview Form表單驗證思路整理

項目基本代碼如下  Modal 和Form結合實現需求

在 Form 內，每個表單域由 FormItem 組成，可包含的控件有：Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker。 

  1.標籤label  

FormItem 上輸入label="ID："標籤名，Form 上輸入:label-width="100"標籤寬度， label-position可以改變標籤相對於輸入框的位置，left 爲左對齊，right 爲右對齊，top 會置於表單域頂部。
  2.  表單驗證

Form 組件基於  async-validator 實現的數據驗證，給Form設置屬性rules,同時給需要驗證的FormItem設置prop指向對應字段

即Form上設置:rules='ruleValidate 對象名稱 ，表單域FormItem 輸入 prop='rulesName'，data中設置默認值

model表單數據對象 ,Form上設置:model="formValidate" 對象名稱 ，控件中輸入 v-model="formValidate.modelName"，data中設置默認值

this.$refs[name].validate((valid) => {//valid驗證結果，name爲rules綁定名稱

})

this.$refs[name].resetFields();重新對整個表單進行重置，將所有字段值重置爲空並移除校驗結果

<template>
    <Form :lable-width='80' ref="formValidate"  :model="formValidate" :rules='ruleValidate'>
        <FormItem lable='姓名：' prop='rulesName'>
           <Input v-model="formValidate.modelName"  style="width: 85%" ></Input>
        </FormItem>
         <FormItem lable='年齡：' prop='rulesAge'>
           <Input v-model="formValidate.modelAge"  style="width: 85%" ></Input>
        </FormItem>
    </Form>
</template>

<script>
export default{
    data(){
        return{
            formValidate:{
                modelName:'',
                modelAge:'',    
            },
            ruleValidate:{
                rulesName:[
                   { required: true, message: 'cannot be empty', trigger: 'blur' }
                ],
                rulesAge: [
                   { required: true, message: '', trigger: 'blur' }
                ],


            }
        }    
    },
    methods:{
        handleSubmit(name){
            this.$refs.[name].validate({(valid)=>{
             //valid 表單驗證結果返回boolean值
               if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
            
             }

            })
        }
    }
}

</script>

  

 

 

     <Form :label-width="100" ref="formValidate" :model="formValidate" :rules="couponValidate">
            <FormItem label="ID：" prop='IDcon' v-if='isIdShow'>
                <Input  disabled :value="modifyId"  style="width: 85%" ></Input>
            </FormItem>
            <FormItem label="名稱：" prop='discountsName'>
                <Input v-model="formValidate.discountsName" value="" placeholder="" style="width: 85%" ></Input>
            </FormItem>
            <FormItem label="金額：" prop='discounts'>
                <Input v-model="formValidate.discounts" placeholder="" style="width: 85%" ></Input>
            </FormItem>
         
            <FormItem label="發放對象：" prop='person' style="width: 85%" >
                <RadioGroup v-model="formValidate.person">
                    <Radio label="無限制">無限制</Radio>
                    <Radio label="新用戶">新用戶</Radio>
                </RadioGroup>
            </FormItem>
          
            <FormItem label="參加活動：" prop='activity'>
                <Select v-model="formValidate.activity"  style="width: 60%">
                    <Option value="非必填">--非必填--</Option>
                    <Option value="活動1">活動1</Option>
                    <Option value="活動2">活動2</Option>
                </Select>
            </FormItem>
           
            <FormItem label="截止日期：" prop='date'>
                <DatePicker style="min-width: 150px" type="date" :placeholder="getDate"  v-model="formValidate.date"></DatePicker>
            </FormItem>
            
        </Form>
    </div>
    <div slot='footer'>
        <Button type='text' @click="cancel">取消</Button>
        <Button type='primary' @click="handleSubmit('formValidate')">確定</Button>
    </div>
</Modal>