推荐使用 rc-form
ReactNative表单验证探究 https://juejin.im/entry/5b5536056fb9a04f9a5cd77b
react-native-gifted-form
react-native-gifted-form是一款非常棒的ReactNative表单验证插件,页面效果非常酷炫,上手也不是很难;但是该项目作者已经很长时间没有维护,并且表单控件只能使用该插件提供的一些控件。
tcomb-form-native
tcomb-form-native是一款非常容易上手的ReactNative表单验证插件,star也达到了将近3k;同样它的缺点也是表单控件只能使用该插件提供的一些控件,并且表单控件的效果与我们的需求差异很大。
tcomb-form-native https://github.com/gcanti/tcomb-form-native
rc-form
rc-form是antd所推荐的一款表单验证插件,它支持ReactNative,可以使用自己封装的表单控件;但是看完官方给出的demo之后,完全懵逼,瞬间感觉遇到了一块硬骨头。
rc-form https://github.com/react-component/form
rc-form 使用强制验证,两次密码不一致合理出现提示:
validate_password2 = () => {
this.props.form.validateFields(['password2'], { force: true, }, (error, value) => {
if (error) {
return;
}
});
};
check_password = (value, callback) => {
let password = value;
const { getFieldValue } = this.props.form;
let repeat_password = getFieldValue('password2');
if (password) {
this.validate_password2();
}
let reg = /^(?=.*[a-zA-Z])(?=.*\d)[^]{8,20}$/;
if (!password) {
callback('请输入登录密码');
} else if (!reg.test(password)) {
callback('密码长度必须在8-20字符内,且必须包含英文字母和数字');
} else if (repeat_password && password !== repeat_password) {
callback('密码不一致');
} else {
callback();
}
}
check_repeat_password = (value, callback) => {
const { getFieldValue } = this.props.form;
let repeat_password = value;
let password = getFieldValue('password');
if (!repeat_password) {
callback('请确认您的登录密码');
} else if (password !== repeat_password) {
callback('密码不一致');
} else {
callback();
}
}
网友评论