free-validator
v1.0.7
Published
``` yarn add --save free-validator ```
Readme
##install
yarn add --save free-validatoror
npm install --save free-validatorHow to use
<div className={styles.container}>
<div className={styles["container-login-form"]}>
<img src={avatarPic} className={styles["container-login-form-avatar"]}/>
<form ref={this.refForm} className={styles['login-form']}>
<div className={styles["container-login-form-item"]}>
<input type="text" autoComplete="off" name="username" placeholder="用户名"/>
</div>
<div className={styles["container-login-form-item"]}>
<input type="password" autoComplete="off" name="password" placeholder="密码"/>
</div>
<button type="button"className={styles["container-login-form-login-btn"]} onClick={this.handleSubmit}>登录</button>
</form>
</div>
</div> import { Validator } from 'free-validator';
//填加规则
validataFunc(registerForm){
let validator = new Validator();
validator.add(registerForm.elements[0],[{
strategy:'isNonEmpty',
errorMsg:'用户名不能为空'
},{
strategy:'minLength:11',
errorMsg:'用户名不能小于11位'
},{
strategy:'isMobile',
errorMsg:'用户名必须是手机号'
}]);
validator.add(registerForm.elements[1],[{
strategy:'minLength:4',
errorMsg:'密码不能小于4位'
}]);
let errorMsg = validator.start();
return errorMsg;
}
//获取错误 formElement为form表单元素
const error = this.validataFunc(formElement);->也可以对规则进行crud
//默认的规则
let validatorRules = {
isNonEmpty:function(value,errorMsg){
if(value ===''){
return errorMsg;
}
},
minLength:function(value,length,errorMsg){
if(value.length<length){
return errorMsg;
}
},
isMobile:function(value,errorMsg){
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
return errorMsg
}
}
}
//添加
import { validatorRules } from "free-validator"
validatorRules = {
...validatorRules,
...
}
//修改完规则再实例化validator对象
let validator = new Validator();