使用 Meteor/React/SimpleSchema 进行表单验证

Question

我对 Meteor 还很陌生。我一直在尝试找到一种方法来向我的 React 组件显示验证错误消息，但我没有成功。

这是 employees.js 文件，它位于我的导入目录

import {Mongo} from 'meteor/mongo';
import {Meteor} from 'meteor/meteor';
import {check, Match} from 'meteor/check'
import SimpleSchema from 'simpl-schema';

export const Employees = new Mongo.Collection('employees');

const Schemas = {};

Schemas.Employee = new SimpleSchema({
  name: {
    type: String,
    min: 2,
  },
  email: {
    type: String,
    min: 2
  },
  phone: {
    type: String
  }
});

Meteor.methods({
  'employees.insert': function (employee) {
    check(employee, Schemas.Employee)
  }
});

这是我处理提交的代码片段。 meteor方法调用的还行，就是没法取回errors对象显示错误。

import React, {Component} from 'react';
import {TextField, RaisedButton} from 'material-ui';
import {Flex, Box} from 'reflexbox';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class EmployeeForm extends Component {

  ... 

  handleSubmit(event) {
    event.preventDefault();
    this.handleClear(() => {
      Meteor.call('employees.insert', this.state, (error, response) => {
        console.log('error', error);
      })
    })
  }

  ...
}

export default EmployeeForm;

非常感谢任何帮助。有关如何执行此操作的文档很少 - 好吧，它是在我搜索互联网时找到的。

谢谢

Answer 1

我认为您不能将 simple schema 与 check 一起使用。通常对于普通的 Meteor 方法，我使用这段代码来验证数据：

Meteor.methods({
  'employees.insert': function (employee) {

    try {
      Schemas.Employee.validate(employee);
    } catch (e) {
      throw new Meteor.Error('error', e.message);
    }

    // ...
  }
});

这样你就会在客户端收到错误信息。我还鼓励您看一下 validated-method，这是定义 Meteor 方法的另一种方法，它有许多有用的混合，包括使用简单模式混合的验证。

Answer 2

我的解决方案很大程度上基于 Khang 的回答。

Employees.attachSchema(Schemas.Employee);

Meteor.methods({
  'employees.insert': function (employee) {
      Employees.insert(employee, { removeEmptyStrings: false }, (error, response) => {
        if (error) {
          throw new Meteor.Error('error', error.invalidKeys);
        }
      });
  }
});

使用 Meteor/React/SimpleSchema 进行表单验证

Form validation using Meteor/React/SimpleSchema

meteor

reactjs

simple-schema