您的位置:首页 > 编程语言

代码备份

2015-10-29 00:00 113 查看
摘要: react表单校验,暂时还不完善,待改进

代码并不完整

校验功能代码:

const async = require('async');

const validatorsHelpers = {
required(defData) {
defData = defData || {};
function returnFunc(data, cb) {

if (data.fieldValue) {
cb(null, data);
return;
}
cb(defData.msg || data.fieldName + " field is required", data);
}
return returnFunc;
},
regex(defData) {
defData = defData || {};
function returnFunc(data, cb) {

if (defData.regex.test(data.fieldValue)) {
cb(null, data);
return;
}
cb(defData.msg || data.fieldName + " field is invalid", data);
}
return returnFunc;
},
phone(defData) {
defData = defData || {};
defData.regex = /(^(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7})$/;
defData.msg = defData.msg || "请输入有效的手机号";
return validatorsHelpers.regex(defData);
}
};

function validateRun(validators, data) {
var tasks = [];

function wapper(validator) {
return function(done) {
validator(data, done);
}
}

for (var task of validators) {
tasks.push(wapper(task));
}

return function(cb) {
async.series(tasks, function(err) {
data['error'] = err;
cb(null, data);
});
}
}

function validate(data, fields, cb) {
var tasks = [];
for (var fieldName of Object.keys(fields)) {
var validatorsObj = fields[fieldName];
var fieldValue = data[fieldName];
var validators = [];

if (validatorsObj !== null && Object.prototype.toString.call(validatorsObj) !== '[object Array]') {
validators = [validatorsObj];
} else {
validators = validatorsObj;
}
if (!validators) {
validators = [];
}

tasks.push(validateRun(validators, {'fieldName': fieldName, 'fieldValue': fieldValue}))
}
async.parallel(tasks, function (err, results) {
var errors = {}, rData = {};
for (var rs of results) {
if (rs.error) {
errors[rs.fieldName] = rs.error;
} else {
rData[rs.fieldName] = rs.fieldValue;
}
}
cb(errors, rData);
});
}

const Mixin = {

validateAll(cb) {
var data = this.state.data, fields = this.state.fileds;
validate(data, fields, (errors, rData) => {
this.setState({
errors: errors
});
cb && cb(Object.keys(errors).length == 0, rData);
});
},
validateOne(name, cb) {
var data = this.state.data, fields = this.state.fields, allerrors = this.state.errors;
var d = {}, f = {};
d[name] = data[name];
f[name] = fields[name];
validate(d, f, (errors, rData) => {
allerrors[name] = errors[name];
console.info(errors, allerrors);
this.setState({
errors: allerrors
});
cb && cb(Object.keys(errors).length == 0, rData);
});
},
handleChangeValidate(event) {
var name = event.target.name;
this.state.data[name] = event.target.value;
this.setState({
data: this.state.data
});
this.validateOne(name);
}
};

module.exports = exports = {
validate: validate,
helper: validatorsHelpers,
Mixin: Mixin
};

调用样例:(代码不全)

const Validateor = require('./common/validator');

const SomeForm = React.createClass({
mixins: [Validateor.Mixin],

getInitialState: function() {
return {
errors: {},
data: {
phone: ''
},
fields: {
phone: [
Validateor.helper.required({errorMsg: "请输入手机"}),
Validateor.helper.phone(),
phoneExist // 其他自定义校验
]
},
phoneLoading: false
};
},

onSubmit: function(e) {
console.info("开始校验。。。。");
this.validateAll().then(function() {
console.info("校验结束。。。。");
this.sendForm();
}.bind(this));
},

render: function() {
return (
<div className="container">
<form className="form-signin">

<PhoneInput
onChange={this.handleChangeValidate}
value={this.state.data.phone}
error={this.state.errors.phone}
/>
onClick={this.onSubmit}>提交</Button>
</form>

</div>
);
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  React