Validation 表单校验

表单校验。

何时使用

同表单结合使用，对表单域进行校验，提供前台校验和后台实时反馈校验，并对表单错误提供有效信息提示。

API

<Validation>
  <Validator>
    <CustomComponent>
      <input />
    </CustomComponent>
  </Validator>
</Validation>

Validation

属性	类型	说明
onValidate	func	当内部 Validator 开始校验时被调用。

方法	说明
validate(callback)	对所有表单域进行校验。
reset()	将表单域的值恢复为初始值。
forceValidate(fields, callback)	对指定的表单域进行校验，fields 对应每个 Validator 包裹的表单域的 name 属性值。

Validation.Validator

一个 Validator 对应一个表单域，校验的表单域需要声明 name 属性作为校验标识，如 <input name="username" />。

属性	类型	默认值	说明
rules	array 或者 object		支持多规则校验，默认提供的规则详见 async-validator，同时支持用户自定义校验规则。
trigger	String	onChange	设定如何触发校验动作。

rules 说明（async-validator）

示例： {type: "string", required: true, min: 5, message: "请至少填写 5 个字符。" }

type : 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 type；
required: 是否必填；
pattern: 声明校验正则表达式；
min / max: 最小值、最大值声明（对于 string 和 array 来说，针对的是其长度 length。）；
len: 字符长度；
enum: 枚举值，对应 type 值为 enum，例如 role: {type: "enum", enum: ['A', 'B', 'C']}；
whitespace: 是否允许空格， true 为允许；
fields: 当你需要对类型为 object 或者 array 的每个值做校验时使用，详见 fields；
transform: 当你需要在校验前对值做一些处理的时候；
message: 自定义提示信息，更多；
validator: 自定义校验规则。

组件演示

var Validation = antd.Validation;
var Validator = Validation.Validator;
var Select = antd.Select;
var Option = Select.Option;
var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;

function cx(classNames) {
  if (typeof classNames === 'object') {
    return Object.keys(classNames).filter(function(className) {
      return classNames[className];
    }).join(' ');
  } else {
    return Array.prototype.join.call(arguments, ' ');
  }
}

function noop() {
  return false;
}

var Form = React.createClass({
  mixins: [Validation.FieldMixin],

  getInitialState() {
    return {
      status: {
        email: {},
        name: {},
        select: {},
        radio: {},
        passwd: {},
        rePasswd: {},
        textarea: {}
      },
      formData: {
        email: undefined,
        name: undefined,
        select: undefined,
        radio: undefined,
        passwd: undefined,
        rePasswd: undefined,
        textarea: undefined
      },
      isEmailOver: false, // email 是否输入完毕
      emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法
    };
  },

  renderValidateStyle(item, hasFeedback=true) {
    var formData = this.state.formData;
    var status = this.state.status;

    var classes = cx({
      'has-feedback': hasFeedback,
      'has-error': status[item].errors,
      'is-validating': status[item].isValidating,
      'has-success': formData[item] && !status[item].errors && !status[item].isValidating
    });

    return classes;
  },

  handleEmailInputBlur() {
    this.setState({
      isEmailOver: true
    });
  },

  handleEmailInputFocus() {
    if (this.state.isEmailOver) {
      this.setState({
        emailValidateMethod: 'onChange'
      });
    }
  },

  handleReset(e) {
    this.refs.validation.reset();
    this.setState(this.getInitialState());
    e.preventDefault();
  },

  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      isEmailOver: true
    });
    var validation = this.refs.validation;
    validation.validate((valid) => {
      if (!valid) {
        console.log('error in form');
        return;
      } else {
        console.log('submit');
      }
      console.log(this.state.formData);
    });
  },

  userExists(rule, value, callback) {
    if (!value) {
      callback();
    } else {
      setTimeout(function () {
        if (value === 'Jasonwood') {
          callback([new Error('抱歉，该用户名已被占用。')]);
        } else {
          callback();
        }
      }, 800);
    }
  },

  checkPass(rule, value, callback) {
    if (this.state.formData.passwd) {
      this.refs.validation.forceValidate(['rePasswd']);
    }

    callback();
  },

  checkPass2(rule, value, callback) {
    if (value && value !== this.state.formData.passwd) {
      callback('两次输入密码不一致！');
    } else {
      callback();
    }
  },

  render() {
    var formData = this.state.formData;
    var status = this.state.status;

    return (
      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
        <Validation ref="validation" onValidate={this.handleValidate}>
          <div className="ant-form-item">
            <label className="col-7" htmlFor="name" required>用户名：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('name')}>
                <Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
                  <input name="name" id="name" className="ant-input" value={formData.name} placeholder="实时校验，输入 JasonWood 看看" />
                </Validator>
                {status.name.isValidating ? <div className="ant-form-explain">正在校验中...</div> : null}
                {status.name.errors ? <div className="ant-form-explain">{status.name.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-7" htmlFor="email" required>邮箱：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('email', this.state.isEmailOver)}>
                <Validator rules={[{required: true, type:'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
                  <input name="email" id="email" className="ant-input" value={formData.email}  placeholder="onBlur 与 onChange 相结合" onBlur={this.handleEmailInputBlur} onFocus={this.handleEmailInputFocus} />
                </Validator>
                {status.email.errors ? <div className="ant-form-explain">{status.email.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-7" required>国籍：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('select', false)}>
                <Validator rules={[{required: true, message: '请选择您的国籍'}]}>
                  <Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
                    <Option value="china">中国</Option>
                    <Option value="use">美国</Option>
                    <Option value="japan">日本</Option>
                    <Option value="korean">韩国</Option>
                    <Option value="Thailand">泰国</Option>
                  </Select>
                </Validator>
                {status.select.errors ? <div className="ant-form-explain">{status.select.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item ant-form-item-compact">
            <label className="col-7" required>性别：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('radio', false)}>
                <Validator rules={[{required: true, message: '请选择您的性别'}]}>
                  <RadioGroup name="radio" value={formData.radio}>
                    <Radio value="male">男</Radio>
                    <Radio value="female">女</Radio>
                  </RadioGroup>
                </Validator>
                {status.radio.errors ? <div className="ant-form-explain">{status.radio.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-7" htmlFor="password" required>密码：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('passwd')}>
                <Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]}>
                  <input name="passwd" id="password" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.passwd}/>
                </Validator>
                {status.passwd.errors ? <div className="ant-form-explain">{status.passwd.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-7" htmlFor="password2" required>确认密码：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('rePasswd')}>
                <Validator rules={[{
                  required: true,
                  whitespace: true,
                  message: '请再次输入密码'
                }, {validator: this.checkPass2}]}>
                  <input name="rePasswd" id="password2" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.rePasswd} placeholder="两次输入密码保持一致"/>
                </Validator>
                {status.rePasswd.errors ? <div className="ant-form-explain"> {status.rePasswd.errors.join(', ')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-7" htmlFor="remark" required>备注：</label>
            <div className="col-12">
              <div className={this.renderValidateStyle('textarea', false)}>
                <Validator rules={[{required: true, message: '真的不打算写点什么吗？'}]}>
                  <textarea className="ant-input" id="remark" name="textarea" value={formData.textarea} placeholder="写点什么吧">
                  </textarea>
                </Validator>
                {status.textarea.errors ? <div className="ant-form-explain">{status.textarea.errors.join(',')}</div> : null}
              </div>
            </div>
          </div>

          <div className="ant-form-item">
            <div className="col-offset-7 col-12">
              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
            &nbsp;&nbsp;&nbsp;
              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
            </div>
          </div>
        </Validation>
      </form>
    );
  }
});

React.render(<Form />, document.getElementById('components-validation-demo-basic'));

基本

基本的表单校验例子。

每个表单域要声明 name 属性作为校验的标识，可通过其 isValidating、errors 属性判断是否处于校验中、是否校验不通过状态，具体可参见 用户名 校验。

表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。

var Validation = antd.Validation;
var Validator = Validation.Validator;

function cx(classNames) {
  if (typeof classNames === 'object') {
    return Object.keys(classNames).filter(function(className) {
      return classNames[className];
    }).join(' ');
  } else {
    return Array.prototype.join.call(arguments, ' ');
  }
}

function noop() {
  return false;
}

var Form = React.createClass({
  mixins: [Validation.FieldMixin],

  getInitialState() {
    return {
      status: {
        pass: {},
        rePass: {}
      },
      formData: {
        pass: undefined,
        rePass: undefined
      },
      passBarShow: false, // 是否显示密码强度提示条
      rePassBarShow: false, 
      passStrength: 'L', // 密码强度
      rePassStrength: 'L'
    };
  },

  handleSubmit(e) {
    e.preventDefault();
    var validation = this.refs.validation;
    validation.validate((valid) => {
      if (!valid) {
        console.log('error in form');
        return;
      } else {
        console.log('submit');
      }
      console.log(this.state.formData);
    });
  },

  handleReset(e) {
    this.refs.validation.reset();
    this.setState(this.getInitialState());
    e.preventDefault();
  },

  renderValidateStyle(item, hasFeedback=true) {
    var formData = this.state.formData;
    var status = this.state.status;

    var classes = cx({
      'has-feedback': hasFeedback,
      'has-error': status[item].errors,
      'is-validating': status[item].isValidating,
      'has-success': formData[item] && !status[item].errors && !status[item].isValidating
    });

    return classes;
  },

  getPassStrenth(value, type) {
    if (value) {
      var strength;
      // 密码强度的校验规则自定义，这里只是做个简单的示例
      if (value.length < 6) {
        strength = 'L';
      } else if (value.length <= 9) {
        strength = 'M';
      } else {
        strength = 'H';
      }
      type === 'pass' ? this.setState({ passBarShow: true, passStrength: strength }) : this.setState({ rePassBarShow: true, rePassStrength: strength });
    } else {
      type === 'pass' ? this.setState({ passBarShow: false }) : this.setState({ rePassBarShow: false });
    }
  },

  checkPass(rule, value, callback) {
    this.getPassStrenth(value, 'pass');

    if (this.state.formData.pass) {
      this.refs.validation.forceValidate(['rePass']);
    }

    callback();
  },

  checkPass2(rule, value, callback) {
    this.getPassStrenth(value, 'rePass');

    if (value && value !== this.state.formData.pass) {
      callback('两次输入密码不一致！');
    } else {
      callback();
    }
  },

  renderPassStrengthBar(type) {
    var strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength;
    var classSet = cx({
      'ant-pwd-strength': true,
      'ant-pwd-strength-low': strength === 'L',
      'ant-pwd-strength-medium': strength === 'M',
      'ant-pwd-strength-high': strength === 'H'
    });
    var level = {
      L: '低',
      M: '中',
      H: '高'
    };

    return (
    <div>
      <ul className={classSet}>
        <li className="ant-pwd-strength-item ant-pwd-strength-item-1"></li>
        <li className="ant-pwd-strength-item ant-pwd-strength-item-2"></li>
        <li className="ant-pwd-strength-item ant-pwd-strength-item-3"></li>
        <span className="ant-form-text">
          {level[strength]}
        </span>
      </ul>
    </div>
    );
  },

  render() {
    var formData = this.state.formData;
    var status = this.state.status;

    return (
      <form onSubmit={this.handleSubmit} className="ant-form-horizontal">
        <Validation ref="validation" onValidate={this.handleValidate}>

          <div className="ant-form-item">
            <label className="col-6" htmlFor="confirmPass" required>密码：</label>
            <div className="col-10">
              <div className={this.renderValidateStyle('pass', false)}>
                <Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]} trigger="onChange">
                  <input name="pass" id="confirmPass" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.pass}/>
                </Validator>
                {status.pass.errors ? <div className="ant-form-explain">{status.pass.errors.join(',')}</div> : null}
              </div>
            </div>
            <div className="col-6">
              {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
            </div>
          </div>

          <div className="ant-form-item">
            <label className="col-6" htmlFor="confirmPass2" required>确认密码：</label>
            <div className="col-10">
              <div className={this.renderValidateStyle('rePass', false)}>
                <Validator rules={[{
                  required: true,
                  whitespace: true,
                  message: '请再次输入密码'
                }, {validator: this.checkPass2}]}>
                  <input name="rePass" id="confirmPass2" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.rePass}/>
                </Validator>
                {status.rePass.errors ? <div className="ant-form-explain"> {status.rePass.errors.join(', ')}</div> : null}
              </div>
            </div>
            <div className="col-6">
              {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
            </div>
          </div>

          <div className="ant-form-item">
            <div className="col-offset-6 col-12">
              <button type="submit" className="ant-btn ant-btn-primary">确 定</button>
              &nbsp;&nbsp;&nbsp;
              <a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
            </div>
          </div>
        </Validation>
      </form>
    );
  }
});

React.render(<Form />, document.getElementById('components-validation-demo-customize'));

自定义校验规则

密码校验实例。

这里使用了 validation 的 forceValidate(fields, callback) 方法，在对第一次输入的密码进行校验时会触发二次密码的校验。