点击提交按钮来确认是否符合验证规则

大家好，欢迎来到IT知识分享网。

使用 async-validator验证库来验证

1.安装async-validator 库

 npm install async-validator

2. 直接使用，例子

 import Schema from 'async-validator';  ​  // 表单数据  const form = {    name: '',    pass: '',  }  ​  // 设置验证规则  const rules = {    name: [     { required: true, message: '请输入用户名', trigger: 'blur' },     { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },   ],    pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],  };  ​  // 点击登录按钮的时候，验证是否满足rules规则  const onSubmit = () => {    const validator = new Schema(rules);  ​    validator.validate(form, (errors, fields) => {      if (errors) {        console.log('验证失败:', errors);        // 显示错误信息        errors.forEach(error => {          console.error(error.message);       });     } else {        console.log('验证成功!');        // 继续处理登录逻辑     }   });  };  ​  // 模拟点击登录按钮  onSubmit();  ​

这里是一个详细的解释：

1. 表单数据：定义一个 form 对象，用于存储用户输入的表单数据。
2. 验证规则：使用 rules 定义验证规则，确保每个字段的验证逻辑。
3. onSubmit 函数：
   • 创建一个新的 Schema 实例，并传入验证规则。
   • 调用 validate 方法对 form 进行验证。
   • validate 方法接收两个参数：表单数据和回调函数。回调函数包含两个参数：errors 和fields
     • 如果有验证错误，errors 将包含所有错误信息。
     • 如果没有错误，errors 将为 null，表示验证通过。
4. 错误处理：
   • 如果存在验证错误，遍历 errors 并输出错误信息。
   • 如果验证成功，继续处理登录逻辑。