代码并不完整
校验功能代码:
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> ); } });