验证有两种类型:后端(或服务器侧)来检查客户端发送的一切都是好的,前端(或客户端侧)在发送任何东西之前检查事物,虽然两者都是必要的,但客户端验证导致了显著改善的用户体验,而无需与服务器一起前进。
验证是一个帮助客户端表单验证的库,通过提供一个组件,您可以将表单包装到。
要开始,请将校准添加到您的项目中,使用npm或yarn:
通过NPM:
1npm add calidation --save
1yarn add calidation
随着校准添加到我们的项目,我们可以轻松地组建一个简单的登录表!
1import React, { Component, Fragment } from "react";
2import { FormValidation } from "calidation";
3
4class LoginForm extends Component {
5 onSubmit = ({ fields, errors, isValid }) => {
6 if (isValid) {
7 // This is where we'd handle our submission...
8 // `fields` is an object, { field: value }
9 console.log('Everything is good:', fields);
10 } else {
11 // `errors` is also an object!
12 console.log('Something is wrong:', errors);
13 }
14 };
15
16 render() {
17 const config = {
18 email: {
19 isRequired: "Email field is required!",
20 isEmail: "Valid emails only, please!"
21 },
22 password: {
23 isRequired: "Password field required!",
24 isMinLength: {
25 message: "16+ character password is required",
26 length: 16
27 }
28 }
29 };
30
31 return (
32 <FormValidation onSubmit={this.onSubmit} config={config}>
33 {({ fields, errors, submitted }) => (
34 <Fragment>
35 <label for="email">Email</label>
36 <input
37 name="email"
38 type="email"
39 value={fields.email}
40 />
41 {submitted && errors.email &&
42 <div className="error">{errors.email}</div>
43 }
44 <label for="password">Password</label>
45 <input
46 name="password"
47 type="password"
48 value={fields.password}
49 />
50 {submitted && errors.password &&
51 <div className="error">{errors.password}</div>
52 }
53 <button>Login</button>
54 </Fragment>
55 )}
56 </FormValidation>
57 );
58 }
59}
60
61export default LoginForm;
图书馆甚至负责检查输入,因为它被输入,而没有我们写的任何额外的事件处理器。
从验证器(LINK0)的土地出发,并为每个输入排除变化事件,这种方法是新鲜空气的呼吸。
登录表格示例实际上只是冰山的顶端,因为验证库提供的比我们使用的少数验证方法要多得多。
以下是您可以从盒子中获得的验证方法的完整列表:
1{
2 field: {
3 isRequired: 'This field is required',
4 isNumber: 'This field must be a number',
5 isEqual: {
6 message: 'This field must equal 10',
7 value: 10,
8 },
9 isGreaterThan: {
10 message: 'This field must be greater than 0',
11 value: 0,
12 },
13 isLessThan: {
14 message: 'This field must be less than 20',
15 value: 20,
16 },
17 isEmail: 'This field must be a valid email address',
18 isRegexMatch: {
19 message: 'This field is alphanumeric',
20 regex: /^[a-z0-9]$/,
21 },
22 isWhitelisted: {
23 message: 'Field must be crocodilian',
24 whitelist: ['alligator', 'crocodile'],
25 },
26 isBlacklisted: {
27 message: 'Field must NOT be crocodilian',
28 blacklist: ['alligator', 'crocodile'],
29 },
30 isMinLength: {
31 message: 'Field must be at least 10 characters',
32 length: 10,
33 },
34 isMaxLength: {
35 message: 'Field must be no more than 20 characters',
36 length: 10,
37 },
38 isExactLength: {
39 message: 'Field must be exactly 5 characters',
40 length: 5,
41 },
42 }
43}
更先进的主题,如滚动自己的校准器和条件验证逻辑是(https://github.com/selbekk/calidation#how-do-you-even)由图书馆的作者。
对于我们从前的登录组件的实时演示,您可以查看此 CodeSandbox。