react ant From 實時驗證 和 提交時統一驗證
阿新 • • 發佈:2019-02-05
一、表單提交時 統一驗證
思路:首先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>