简单反应验证器

由Laravel验证所激发的简单反应和反应本土形式验证器.

对国家预防机制的看法

关于

简单的反作用验证器就是它的声音。我们想建立一个验证器来进行配置最小并且自然使用的反应。它的配置和用法类似于Laravel PHP框架,使验证像一行一样容易.

工作示例

文档

使用量
设置
规则
选项
1. 元素
2. 类名
3. 信件
4. 验证器
5. 自动强制更新
6. 本地化
自定义验证器

使用量

打开 example/index.html 文件用于更多使用库实例或检查示例

无

npm install simple-react-validator --save

箭头

bower install simple-react-validator --save

3 简单步骤

导入并初始化验证符 .

import SimpleReactValidator from 'simple-react-validator';

编号5

componentWillMount: function() {
  this.validator = new SimpleReactValidator();
},

代码6

constructor() {
  this.validator = new SimpleReactValidator();
}

在输入下添加验证规则。这个 message 方法接受5个参数:

字段名称:一个独特的下划线字符串,在消息中被替换为字段的名称.
数值:通常为当前字段的状态.
规则字符串: 用于字符串的管道分隔规则列表.
选项( 可选): 选项对象与默认选项。。。 .

this.validator.message('title', this.state.title, 'required|email')

示例

render() {
  return (
    <div className="container">
      <h1>Write a Review</h1>
      <div className="form-group">
        <label>Title</label>
        <input className="form-control" value={this.state.title} onChange={this.setTitle} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('title', this.state.title, 'required|alpha')}

      </div>
      <div className="form-group">
        <label>Email</label>
        <input className="form-control" value={this.state.email} onChange={this.setEmail} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('email', this.state.email, 'required|email', { className: 'text-danger' })}

      </div>
      <div className="form-group">
        <label>Review</label>
        <textarea className="form-control" value={this.state.review} onChange={this.setReview} />

        {/**********   This is where the magic happens     ***********/}
        {this.validator.message('review', this.state.review, 'required|min:20|max:120')}

      </div>
      <button className="btn btn-primary" onClick={this.submitForm}>Save Review</button>
    </div>
  );
}

检查提交时验证是否通过, 如果失败则打开信件。一旦消息被打开,验证消息会随着用户类型而改变并更新.

submitForm() {
  if (this.validator.allValid()) {
    alert('You submitted the form and stuff!');
  } else {
    this.validator.showMessages();
    // rerender to show messages for the first time
    // you can use the autoForceUpdate option to do this automatically`
    this.forceUpdate();
  }
}

有另一种方法可以用来检查单个字段是否有效.

if (this.validator.fieldValid('email')) {
  // booya this field is valid!
}

注:自动更新日期

从v1.1.0起,您可以用 autoForceUpdate 选项,然后通过它的反应实例对国家负责。这将自动调用 this.forceUpdate() 当你 showMessages, (中文(简体) ), hideMessages, (中文(简体) ), showMessageFor,以及 hideMessageFor 被调用.

constructor() {
  this.validator = new SimpleReactValidator({autoForceUpdate: this});
}

1. 可用的公共方法

getErrorMessages() 返回 JS 对象, 键为字段名, 值为错误消息 .

showMessages() 打开显示所有信件的信件 .

hideMessages() 关闭显示所有信件的信件 .

showMessageFor(field) 打开显示特定字段的信息。用于布莱尔。。。 .

hideMessageFor(field) 关闭显示特定字段的信息。用于布莱尔。。。 .

allValid() 如果所有字段都通过验证或不通过, 返回布尔值 .

fieldValid(field) 检查单个字段是否有效 .

purgeFields() 启用验证对象条件字段.

messageWhenPresent(message, options = {}) 设置信件时显示信件, 有利于 ajax 验证错误 .

check(value, validations) 一种简单的方式来对照验证规则中构建的值来检查值. 不添加验证符, 只是给出一个真实/ 假返回值 .

message(field, value, validations, options = {}) 如何定义验证规则,并在表格中添加消息.

2. 关于Blur

您可以在输入模糊后使用Blur动作上的反应来显示单个字段. 使用 showMesssageFor 或者说 hideMessageFor 方法。。 .

<div>
  <label>Email</label>
  <input value={this.state.email} onChange={/* update email */} onBlur={() => this.validator.showMessageFor('email')} />
  {this.validator.message('email', this.state.email, 'required|email')}
</div>

3. 有条件的领域

通过上面添加一个字段到验证符中 message 方法。但有时要随着表单的完成有条件地添加并去除验证. 这个你可以用 purgeFields 在每次渲染之前清除所有验证符的方法,因此只有在该渲染过程中添加的字段才被验证.

render() {
  this.validator.purgeFields();
  return (
    <div>
      <div className="form-group">
        <label>Address Line 1</label>
        <input className="form-control" value={this.state.title} onChange={this.setTitle} />
        {this.validator.message('title', this.state.title, 'required|alpha')}
      </div>
      {this.optinallyAddAnotherAddressLine()}
      <button className="btn btn-primary" onClick={this.submitForm}>Save Review</button>
    </div>
  );
}

4. 反应钩

SimpleReactValidator是一个类,但如果在无国籍的React组件中即时切入一个类,它将在每次渲染时都这样做(关闭可能添加的任何消息信息).

使用参考文献: 指示反应将简单反应变异器作为单通处理 :

const simpleValidator = useRef(new SimpleReactValidator())

<Input
  name="name"
  value={companyInformation.name}
  onChange={handleInputChange}
  onBlur={()=>simpleValidator.current.showMessageFor('name')} />
{simpleValidator.current.message('name', companyInformation.name, 'required')}

详情见问题:97

5. 土著反应

您需要用 <Text> 元素.

<Text>
  {this.validator.message('title', this.state.title, 'required|alpha')}
</Text>

规则

这是您可以校验格式输入的所有规则列表。当使用多个规则时,用管子将它们分开 |。在添加选项时,在规则中附加一个冒号,并用逗号分隔选项。实例: 'required|min:20|max:120' 财务报告和审定财务报表 'required|in:stu,stuart,stuyam'您可以通过一个阵列来应用规则 ['required', {max: 20}, {min: 120}] 或者说 ['required', {in: ['stu', 'stuyam']}]。这对于像正则验证器这样的东西是必需的,在正则中您可能使用管道或逗号,并且会与规则字符串相冲突.

获得接受
之后
之后或相等
阿尔法
阿尔法空格
阿尔法数字
阿尔法空格
阿尔法数
阿尔法 Num Dash 空格
阵列
在此之前
之前或相等
之间
布尔
卡片过期
卡片号码
货币
日期
日期相等
电子邮件
单位
整数
马克斯
分钟
不进
不是雷格克斯语
数字
电话
缩写
需求
大小
字符串
类型
乌尔尔

已接受

必须是 Java 脚本真实,适合所需的复选框.

日期之后

一定是约会过后见日期用于提供已接受日期值的信息.

等:日期之后

必须是在之后或日期。见日期用于提供已接受日期值的信息.

阿尔法

只能用集装箱字母.

α- 空间

只能使用容器的字母和空格 .

α num

只能是容器的字母和号码.

α num 空间

只能使用容器的字母、数字和空格.

α num dash

只能是容器的字母、数字、破折号和下划线.

α num dash 空间

只能是容器的字母、数字、破折号、下划线和空格.

数组

必须是 JavaScript 矩阵 .

日期:

一定在约会之前见日期用于提供已接受日期值的信息.

前为平:日期

必须是在日期之前或日期。见日期用于提供已接受日期值的信息.

介于: min, max, 类型( 可选)

必须在两个值之间。见大小用于提供如何计算大小和如何使用选项的信息.

布尔

必须是 JavaScript Boolean .

纸牌表达式

必须是有效的信用卡到期日。例10/18或10/2018 (韩语)

纸牌( num)

一定是有效的信用卡号码 Ex. 4242424242或4242 4242 4242 4242

货币

一定是有效货币美元符号和逗号是可选的。前4.25、3 000或3 245 525.12美元

日期

必须是日期类型时间约会. 需要时间

日期( e): 日期

一定是特定日期的约会.
选项 : 日期必须是时间对象.

电子邮件

必须是有效的电子邮件格式 .

在: foo, bar, 中, 中, 中.

必须匹配选项中的字符串 .
选项 : 它必须匹配的数值列表.

整数

必须是整数 .

最大:大小,类型(可选)

一定不会超过最大。见大小用于提供如何计算大小和如何使用选项的信息.

分:大小,类型(可选)

一定不会小于分钟。见大小用于提供如何计算大小和如何使用选项的信息.

不是在: foo, bar, , , , ,...

在选项中不能匹配字符串 .
选项 : 列出它不能匹配的值.

非正则: pattern

一定不匹配正则名词 .
选项 : 瑞克丝一定不匹配.
说明: 如果您的 regex 使用 qq 或 , 或其他特殊字符使用数组语法定义规则 .

数字

一定是任意类型的数字.
正数 : “ 数值 : 0. 0 ”
负数“ 数值 : 0. 0 ”

电话

必须是有效的电话号码格式。前(508年) 555-1234或5085551234

regex: 扩展

一定跟Regex一样.
选项 : 雷克克斯必须匹配.
说明: 如果您的 regex 使用 qq 或 , 或其他特殊字符使用数组语法定义规则 .

所需经费

必须在场,与其他验证人一起使用才能要求它们.

大小:大小,类型(可选)

一定有特别的尺寸可以是字符串长度,数组长度,也可以是数字.
选项 : 类型是可选的,默认为 string。有3个“字符串”、“数字”和“阵列”。字符串为字符串长度,num为数字大小,数组为数组长度.

字符串

必须是类型字符串.

类型: 类型

必须是选项中指定的 JavaScript 类型 .
选项 : 比较给出的数值类型与所提供的类型。使用数组语法来定义其它类型,它永远是类型字符串.

url 密码

必须是有效的url。 ex. (英语). https://dockwa.com (中文(简体) ) 或 ditchwa.com (中文(简体) )

选项

简单反应验证器在初始化时可以接收选项对象,或者在定义验证器时作为第四个参数. 你可以提供四个选项.

1. 要件:

接受一个块,您可以返回要从验证器信件中将信件包裹的默认元素。默认元素是 <div className="srv-validation-message">{message}</div>。如果您正在使用 React Introduction ,默认将只是返回的信息。您也可以设置 element: false 仅仅返回一个消息.

需要2个参数
消息: 来自验证器的消息 .
类Name (可选) : 将可选择提供, 这样您可以在每次验证的基础上更改类名 .

this.validator = new SimpleReactValidator({
  element: message => <div>{message}</div>
  // OR
  element: (message, className) => <div className={className}>{message}</div>
})

2. 类Name

要传递到元素的类的字符串, 默认为 srv-validation-message 并且可以被覆盖.

3. 信息:

接受一个对象来覆盖验证信件。它还接受一个会覆盖所有信件的默认值 .

this.validator = new SimpleReactValidator({
  messages: {
    email: 'That is not an email.'
    // OR
    default: 'Validation has failed!'  // will override all messages
  },
})

4. 验证者:

接受自定义验证对象。见自定义验证器关于定义自定义验证符的更多信息.

5. 自动更新日期:

接受一个反应实例,并在信件被自动显示和隐藏时自动调用. 更多关于自动更新的日期

6. 地点:

接受带有您选择的本地化消息的字符串. 要做到这一点,正确的语言文件也需要被加载到您的前端. 当前支持的语言帮助翻译项目用途此文件作为模板.

// sets french default validation messages.
this.validator = new SimpleReactValidator({locale: 'fr'});

您可以应用自定义信件信件选项。然而,您也可以应用一种自定义语言,供您以后随 addLocale 类法.

SimpleReactValidator.addLocale('klingon', {
  accepted: 'Hab SoSlI’ Quch!',
  email: 'Heghlu’meH QaQ jajvam'
});
...
this.validator = new SimpleReactValidator({locale: 'klingon'});

自定义验证器

你可以写自定义规则,以便使用验证. 一条规则有四个选项:

消息: 当验证失败时, 将会显示消息。 :属性将被替换为 人性化 名称为您提供的您正在验证的属性( 支持 snake case 或 cameasCase) .
规则:接受一个块,如果验证器通过,则返回真实,如果失败,则输入错误.

需要3个参数
val: 正在验证的值 .
段落 : 包含参数的数组传递到验证器中 .
验证符 : 校验对象, 允许您访问诸如 validator.helpers.textRegex(val, regex) 它返回真实或虚假,如果regex通过.

信件重置( 可选) : 接受块用于修改并返回苍蝇上的信件 .

需要2个参数
电文:以上电文.
段落 : 包含参数的数组传递到验证器中 .

需要( 可选) : 如果您想要在应用时隐含对验证符的要求, 则为真。默认情况下不要求所有验证符。相当于添加 required 每个验证定义.

示例

constructor() {
  this.validator = new SimpleReactValidator({
    validators: {
      ip: {  // name the rule
        message: 'The :attribute must be a valid IP address and must be :values.',
        rule: (val, params, validator) => {
          return validator.helpers.testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && params.indexOf(val) === -1
        },
        messageReplace: (message, params) => message.replace(':values', this.helpers.toSentence(params)),  // optional
        required: true  // optional
      }
    }
  });
}

用法 :

render: function() {
  return (
    <div className="container">
      <h1>Give Me Your IP</h1>
      <div className="form-group">
        <label>IP Address</label>
        <input className="form-control" value={this.state.ip} onChange={this.setIP} />
        {this.validator.message('ipAddress', this.state.ip, 'required|ip:127.0.0.1')}
      </div>
      ...
    </div>
  );
},

@crystaldelta/simple-react-validator