antdesign⾃定义表单验证⼤全
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>
View Code
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', {
},{
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.FieldsValue();
ant design
console.log('收到表单值：', this.FieldsValue());
    　//重要
this.props.form.validateFieldsAndScroll((errors, values) => {
console.log(values);
if (!!errors) {
console.log('Errors in form');
return;
}
// values.dfbmId = this.props.signUser.dfbmId;
//Id = this.Id;
console.log("values"+values);
portingXzcfService.chuFaSave(values);
console.log('Submit');
console.log(values);
});
}
im().length === 0
input.value.length>0 && im().length > 0 //可以使⽤
function isNull(str) {
if (str == "") return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
st(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,})+$/;
st(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) {
// ...
View Code