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

时间:2017-02-10 03:24:22

标签: reactjs meteor simple-schema

我对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方法被称为罚款,只是我无法将错误对象返回以显示错误。

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;

任何帮助都会让我非常感激。关于如何做到这一点的文件很少 - 很好的是我搜索了互联网。

由于

2 个答案:

答案 0 :(得分:1)

我认为您不能将simple schemacheck一起使用。通常对于普通的Meteor方法,我使用此代码来验证数据:

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

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

    // ...
  }
});

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

答案 1 :(得分:0)

我的解决方案非常基于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);
        }
      });
  }
});