ant design vue 中的表單校驗 v-decorator

1.v-decorator和v-model區別
v-decorator在我看來更加適合於有驗證的操作，比如不為空，唯一值，只能是數字等等。而v-model更加適合用來定義一些組件返回的接收參數，更好處理和獲取，以及一些默認隱藏或者不顯示但保存或修改需要用到的參數。

2.v-decorator的用法
部分測試代碼

......
<a-form-item label="name" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
  <a-input v-decorator="['name']" placeholder="請輸入名字" @change="changeMe"></a-input>
</a-form-item>
<a-form-item label="id" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
  <a-input v-decorator="['id']" placeholder="請輸入id"></a-input>
</a-form-item>
......

2.1 獲取v-decorator的值

methods: {
    changeMe(selectedValue) {
        //selectedValue就是當前觸發字段的值，也可以用下getFieldValue獲取，但是有些組件好像獲取在賦值前，可能需要加延遲
        this.form.getFieldValue('name')
     } 
}

2.2 設置v-decorator的值

methods: {
    changeMe(selectedValue) {
        this.form.setFieldsValue({
             name: "值",//
             id: res.result.id,//最后一個逗號隨意
           });
     } 
}

2.3 v-decorator在form表單的驗證：

部分前端代碼

......
<a-form-item label="名字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
 <a-input v-decorator="['name', validatorRules.name]" placeholder="請輸入"></a-input>
</a-form-item>
<a-form-item label="數字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
 <a-input v-decorator="['number', validatorRules.number]" placeholder="請輸入"></a-input>
</a-form-item>
......

驗證：

data() {
   return {
           form: this.$form.createForm(this),
           validatorRules: {
          name: {//name與v-decorator中屬性對應
            initialValue: "水",//初始化值，也就是默認值 
            rules: [
              { required: true, message: '請輸入檢驗日期!'},//此處開啟校驗必填
              {validator: (rule, value, callback) => validateDuplicateValue('em_project_info', 'project_name', value, this.model.id, callback)},//此處開啟唯一驗證，
              { pattern: /^1[3456789]\d{9}$/, message: '請輸入正確的手機號碼!'},//此處配置正則表達式，手機號，可自己配置正則表達式
            ]
            },
          number: {//name與v-decorator中屬性對應
            rules: [
              { pattern: /^1[3456789]\d{9}$/, message: '請輸入正確的手機號碼!'},//此處配置正則表達式，手機號，可自己配置正則表達式
            ]
            },
        },
        
   }
}

校驗配置：

默認時間：

initialValue: moment(new Date()).format("YYYY-MM-DD"),//，此處一定要導入import moment from "moment"; 

必填：

rules: [
    { required: true, message: '請輸入檢驗日期!'}
]

校驗唯一值：

rules: [
     {validator: (rule, value, callback) => validateDuplicateValue('表名', '驗證唯一值的字段', value, this.model.id, callback)},
]

正則表達式驗證：

rules: [
     { pattern: /^1[3456789]\d{9}$/, message: '請輸入正確的手機號碼!'},//pattern為正則表達式，message為提示信息，正則表達式可以根據自己需求來設置。此處注意在/正則表達式/。在倆斜杠之間位正則表達式。
]

2.4 JEditableTable的驗證：

部分代碼：此處包含唯一驗證，必填驗證，正則表達式驗證

columns: [
 {
   title:'名稱',
   align:"center",//居中顯示
   width: '280px',//寬度
   ellipsis: true,
   key: 'name',//字段名
   type: FormTypes.input,//表示以input標簽顯示
   placeholder: '請輸入${title}',//提示信息
   validateRules: [
     {
       required: true,//在前端設置此字段必填
       message: '${title}不能為空',//在前端設置此字段不能為null，提示文本
       // 自定義函數校驗 handler,表單驗證，此處為唯一性驗證
       handler(type, value, row, column, callback, target) {
         //驗證sampleName不能重復
         let { values } = target.getValuesSync({ validate: false })
         let count = 0
         for (let val of values) {
           if (val['name'] === value) {//什么字段就傳什么參數，
             if (++count >= 2) {
               callback(false, '${title}不能重復')
               return
             }
           }
         }
         callback(true) // true = 通過驗證
       }
     }
   ],
 },
 {
   title:'數量',
   align:"center",
   //dataIndex: 'number'
   width: '140px',
   ellipsis: true,
   key: 'number',
   type: FormTypes.input,
   placeholder: '請輸入${title}',
   validateRules: [
     { pattern:  /^[1-9]\d*$/, message: '請輸入正整數!'},//正則表達式驗證，正整數
   ]
 },
}

2.5 v-decorator的其他知識點

去空字符串

v-decorator.trim="[ 'dictCode', validatorRules.dictCode]"//v-decorator.trim為去空操作

 

 

rules:[{validator:(rule, value, callback)=>validateDuplicateValue('表名','驗證唯一值的字段', value,this.model.id, callback)},]