ant design 自定義表單驗證大全

2017-09-20

 

<FormItem {...formItemLayout}
                              label="主機名"
                              hasFeedback>
                      {getFieldDecorator('hostName', {
                        rules: [{
                          required: true, max: 20, message: '請輸入主機名(最多20字符)!'
                        }],
                        initialValue: this.isAdd() ? "" : this.hostState.hosts.hostName
                      })(
                        <Input/>
                      )}
                    </FormItem>

 

 

 

2017-03-31 最近看了and的文檔發現個小東西，以前做的時候關於非空的時候空格需要自己寫函數判斷，今天看文檔發現了一個屬性，太好用了！

代碼展示：

 required: true,whitespace:true,兩個屬性一起設置就能滿足非空空格通不過的問題了

{
        type: 'text',
        item: {label: '相對人名稱'},
        name: 'xdr',
        options: {initialValue: initialValue.xdr,
            rules: [{
                required: true,whitespace:true, message: '相對人名稱不能為空'
            }],
        }
    }

 

 

 

 

 

 

 

 

 

 

 需求是 賬號名可以是手機號也可以是郵箱 要做手機號和郵箱的驗證，官網的那個驗證規則不匹配  怎么自定義驗證規則？ 

一：組件部分

<Form horizontal>
                    <Row gutter={24}>
                        <Col sm={12}>
                            <FormItem {...formItemLayout} label="賬號名" hasFeedback>
                                {getFieldDecorator('account', {
                                    rules: [{
                                        required: true, message: '賬號名不能為空',
                                    },{
                                        validator: this.checkAccount,
                                    }],
                                    initialValue: ''
                                })(
                                    <Input placeholder="手機號或郵箱號"/>
                                )}
                            </FormItem>

                            <FormItem {...formItemLayout} label="用戶密碼">
                                {getFieldDecorator('password', {
                                    rules: [{
                                        required: true, message: '密碼不能為空',
                                    }],
                                })(
                                    <Input type="password"/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <FormItem wrapperCol={{span: 18, offset: 10}}>
                        <Button type="primary" onClick={this.handleSubmit.bind(this)}>確定</Button>
                    </FormItem>
                </Form>

二：自定義驗證規則部分

//

this.checkAccount

checkAccount(rule, value, callback) {
         var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

        if (value.length==11 || re.test(value)) {
            callback();
        } else {
            callback('賬號名為郵箱或手機號');
        }
    };

三 .響應事件函數調用規則 ：

 

 handleSubmit(e) {
        e.preventDefault();
        //const values = this.props.form.getFieldsValue();
        console.log('收到表單值：', this.props.form.getFieldsValue());
　　　　　//重要
        this.props.form.validateFieldsAndScroll((errors, values) => {
            console.log(values);
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            // values.dfbmId = this.props.signUser.dfbmId;
            //values.orgId = this.props.signUser.orgId;
            values.orgId  = this.props.signUser.orgId;
            console.log("values"+values);
            this.props.reportingXzcfService.chuFaSave(values);
            console.log('Submit!!!');
            console.log(values);
        });
    }

 

 

 

 

 

js怎么判斷字符串是不是全是空格

keyWords.value.trim().length === 0 input.value.length>0 && input.value.trim().length > 0 //可以使用

 

function isNull(str) { if (str == "") return true; var regu = "^[ ]+$"; var re = new RegExp(regu); return re.test(str); } //校驗非空  checkAccount(rule, value, callback) { if (!isNull(value)) { callback(); } else { callback('用戶名不能為空'); } }; //校驗手機號碼  checkPhone(rule, value, callback) { if(!(/^1(3|4|5|7|8)\d{9}$/.test(value))){ callback("手機號碼有誤，請重填"); }else{ callback(); } }; //校驗郵箱  checkEmail(rule, value, callback) { var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; if(re.test(value)){ callback(); }else{ callback("郵箱號有誤，請重填"); } };

 

 

 

 

 

 

for-of 循環

與 與 ES6  迭代器協議協同使用
ECMAScript 6 中定義了一個迭代器協議，我們在“深入淺出 ES6（二）：迭代器和
for-of 循環”中已經詳細解析過。當你迭代 Maps（ES6 標准庫中新加入的一種對象）后，
你可以得到一系列形如 [key, value] 的鍵值對，我們可將這些鍵值對解構，更輕松地訪
問鍵和值：
var map = new Map();
map.set(window, "the global");
map.set(document, "the document");
for (var [key, value] of map) {
console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"
只遍歷鍵：
for (var [key] of map) {
// ...
}
或只遍歷值：
45
深入淺出 ES6（六）：解構 Destructuring
for (var [,value] of map) {
// ...
}