diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md deleted file mode 100644 index 9f1b3a46a..000000000 --- a/components/form/demo/validate-customized.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -order: 13 -title: - zh-CN: 自定义校验规则 - en-US: Customized validation ---- - -## zh-CN - -密码校验实例。 - -这里使用了 `this.props.form.validateFields` 方法,在对第一次输入的密码进行校验时会触发二次密码的校验。 - -## en-US - -Customized validation for Password. - -To use `this.props.form.validateFields` method, when validating first password you enter will trigger the second password validation. - -````jsx -import { Button, Form, Input, Row, Col } from 'antd'; -import classNames from 'classnames'; -const createForm = Form.create; -const FormItem = Form.Item; - -function noop() { - return false; -} - -let Demo = React.createClass({ - getInitialState() { - return { - dirty: false, - passBarShow: false, // Whether to display a tooltip of password strength - rePassBarShow: false, - passStrength: 'L', // Password strength - rePassStrength: 'L', - }; - }, - - handleSubmit() { - this.props.form.validateFields((errors, values) => { - if (errors) { - console.log('Errors in form!!!'); - return; - } - console.log('Submit!!!'); - console.log(values); - }); - }, - - getPassStrenth(value, type) { - if (value) { - let strength; - // Customized the password strength, here is just a simple example - if (value.length < 6) { - strength = 'L'; - } else if (value.length <= 9) { - strength = 'M'; - } else { - strength = 'H'; - } - this.setState({ - [`${type}BarShow`]: true, - [`${type}Strength`]: strength, - }); - } else { - this.setState({ - [`${type}BarShow`]: false, - }); - } - }, - - checkPass(rule, value, callback) { - const form = this.props.form; - this.getPassStrenth(value, 'pass'); - - if (form.getFieldValue('pass') && this.state.dirty) { - form.validateFields(['rePass'], { force: true }); - } - - callback(); - }, - - checkPass2(rule, value, callback) { - const form = this.props.form; - this.getPassStrenth(value, 'rePass'); - - if (value && value !== form.getFieldValue('pass')) { - callback('Two passwords you enter is inconsistent!'); - } else { - callback(); - } - }, - - renderPassStrengthBar(type) { - const strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength; - const classSet = classNames({ - 'ant-pwd-strength': true, - 'ant-pwd-strength-low': strength === 'L', - 'ant-pwd-strength-medium': strength === 'M', - 'ant-pwd-strength-high': strength === 'H', - }); - const level = { - L: 'Low', - M: 'Middle', - H: 'High', - }; - - return ( -