使用Validate.js在React Native-未知验证器最小值上使用错误

Question

我正在使用http://validatejs.org/在屏幕中使用validate.js。

import React, { Component } from 'react';
import { 
  View, 
  Text, 
  TextInput, 
  TouchableOpacity } from 'react-native';
// Validate.js validates your values as an object
import validate from 'validate.js'
const constraints = {
  email: {
    presence: {
      message: "Cannot be blank."
    },
    email: {
      message: 'Please enter a valid email address'
    }
  },
  password: {
    presence: {
      message: "Cannot be blank."
    },
    length: {
      minimum: 5,
      message: 'Your password must be at least 5 characters'
    }
  }
}

const validator = (field, value) => {
  // Creates an object based on the field name and field value
  // e.g. let object = {email: '[e-mail]'}
  let object = {}
  object[field] = value
  let constraint = constraints[field]
  console.log(object, constraint)
  // Validate against the constraint and hold the error messages
  const result = validate(object, constraint)
  console.log(object, constraint, result)
  // If there is an error message, return it!
  if (result) {
    // Return only the field error message if there are multiple
    return result[field][0]
  }
  return null
}

export default class Login extends Component {
  state = {
    email: '',
    emailError: null,
    password: '',
    passwordError: null,
  }
  logIn = () => {
    let { email, password } = this.state;
    console.log( email, password)
    let emailError = validator('email', email)
    let passwordError = validator('password', password)
    console.log( emailError, passwordError)
    this.setState({
      emailError: emailError,
      passwordError: passwordError,
    })
  }
  render() {
    const {emailError, passwordError } = this.state
    return (
        <View>
          <TextInput 
            onChangeText={(email) => this.setState({email})} 
            placeholder="Email Address" 
            keyboardType='email-address'
            autoCapitalize='none'
            />
          <Text> {emailError ? emailError : null }</Text>
          <TextInput 
            onChangeText={(password) => this.setState({password})} 
            placeholder="Password" 
            secureTextEntry={true}
            autoCapitalize='none'
            type="password" 
            />
          <Text> {passwordError ? passwordError : null }</Text>
        <TouchableOpacity onPress={this.logIn}>
          <Text>LOG IN</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

运行上面的代码记录以下内容并引发错误"未知验证器消息"

.. I ReactNativeJS: '[e-mail]', 'j'
.. I ReactNativeJS: { email: '[e-mail]' }, { presence: { message: 'Cannot be blank.' },
.. I ReactNativeJS:   email: { message: 'Please enter a valid email address' } }
.. E ReactNativeJS: Unknown validator message

Answer 1

您的validate调用是错误的。应该是：

const result = validate(object, { [field]: constraint })

请注意，您的对象是：

{email: ...}

因此，传递给验证的约束也需要是以下形式：

{email: emailConstraints }

发生的事情是验证器查看email并在那里寻找验证器(约束(，但它发现的只是message，它打印

未知验证器"消息"

( "message"是未知约束的名称(。

Answer 2

尝试一下，我在下面的函数中更改了，它可以正常工作。

const validator = (field, value) => {
      // Creates an object based on the field name and field value
      // e.g. let object = {email: '[e-mail]'}
      let object = new Object()
      object[field] = value
      let constraint = new Object()
      constraint[field] = constraints[field]
      console.log(object, constraint)
      // Validate against the constraint and hold the error messages
      const result = validate({}, constraint)//
      if (value != '' && value != null) {//if null value it will return with the presence validation
         result = validate(object, constraint)
      }
      // If there is an error message, return it!
      if (result) {
        // Return only the field error message if there are multiple
        return result[field][0]
      }
      return null
    }

Answer 3

我设法通过这样使它起作用：

let emailConstraints;
<TextInput 
            onChangeText={(emailConstraints) => this.setState({email: emailConstraints })} 
            placeholder="Email Address" 
            keyboardType='email-address'
            autoCapitalize='none'
            />
<Text> {emailError ? emailError : null }</Text>

Answer 4

我有一个特定的问题，但我可以说出问题是什么。我的错误是Unknown validator checked。该错误消息中的单词单词表示问题。这意味着属性检查(在我的情况下(和最小值(在您的情况下(在约束的JSON中使用了错误的位置。或者，它位于右JSON块中，但是该块中的一个或许多其他属性不应存在，validate.js解析器使用该块中的第一个属性报告了错误，无论其在正确的范围内。我有这个

policy: {
presence: true,
checked: true}

用于复选框验证，但是该库不允许该块中未知的属性checked。在您的情况下，我认为message属性不应在length块中，而是validate.js在该块中使用第一个属性minimum报告了错误，否则该块在正确的位置。因此，您可能应该考虑删除message属性，并且情况会很好。