1. 程式人生 > >react ant From 實時驗證 和 提交時統一驗證

react ant From 實時驗證 和 提交時統一驗證

一、表單提交時 統一驗證 
思路:首先form的item上有自己的onchange驗證事件,通常都是 數字、非空、長度  等ant 內建驗證規則,第二種方法 是新增這種自定義 規則
單機事件中使用 validateFields(errors, values) 內建方法,會獲取到form中已有驗證的錯誤和值。然後在中寫自己的 驗證方法。最後統一判斷。
思路比較清晰簡單,但是寫的時候來回倒騰,費了好大勁,記錄


提交時驗證程式碼:

validateFields((errors, values)

 myForm.validateFields((errors, values) => {

            let flag = true;
            //驗證sql的可執行性
            let SQL = values.SQL;
            let Code = values.Code;
            auth.Ajax("/check/checkSQL", { SQL: SQL, Code: Code }, function (res) {
                 console.log(res);
                if (res.result == '1') {  //返回正常引數
                    flag = false;
                    myForm.setFields({//設定驗證返回錯誤
                        SQL: {
                            value: SQL,
                            errors: [new Error(res.data)],
                        },
                    });
                }else{
                    flag = true ;
                    myForm.setFields({//設定刪除上一次錯誤資訊
                        SQL: {
                            value: SQL,
                            errors: null,
                        },
                    });
                }

            });
       
            if (errors || !flag) {
                console.log('Errors in form!!!');
                return;


            }else{
                console.log('No Errors in form!!!');
            }


二、單個item 實時驗證,相當於onchange時間中些方法 


特點:實時驗證,只要該欄位一改變就會呼叫這個方法。

定義的驗證方法
checkConfirm(rule, value, callback) {
          auth.ajax("/briefing/checkSQL", { SQL: value, Code: "DS" }, function (res) {
                   
                    if (res.result == '1') {
                        console.log("set error");
                        callback("SQL錯誤,請修改!");
                    }
             });
            
        callback();
    }






在 item中定義這個規則    { validator: this.checkConfirm }
<FormItem
               {...formItemLayout}
               label={"查詢SQL"}
               hasFeedback>
               {getFieldDecorator('SQL', {
                      rules:[{ required: true, message: '簡報時機必須選擇', }, { validator: this.checkConfirm }], 
                      initialValue: this.state.data.SQL
               })(
            <Input type="textarea" onChange={this.handleSqlChange.bind(this)}  autosize={{minRows: 2, maxRows: 6}} disabled={(isDisabled)} />
               )}
         </FormItem>