# 自定义校验规则
- order: 1
密码校验实例。
这里使用了 validation 的 `forceValidate(fields, callback)` 方法，在对第一次输入的密码进行校验时会触发二次密码的校验。
---
````jsx
import {Validation, Button, Form, Input, Row, Col} from 'antd';
const Validator = Validation.Validator;
const FormItem = Form.Item;
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;
}
const Demo = 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) {
const formData = this.state.formData;
const status = this.state.status;
const classes = cx({
'error': status[item].errors,
'validating': status[item].isValidating,
'success': formData[item] && !status[item].errors && !status[item].isValidating
});
return classes;
},
getPassStrenth(value, type) {
if (value) {
let 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) {
const strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength;
const classSet = cx({
'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: '低',
M: '中',
H: '高'
};
return (
);
},
render() {
const formData = this.state.formData;
const status = this.state.status;
return (
);
}
});
ReactDOM.render(, document.getElementById('components-validation-demo-customize'));
````