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: 'email@example.com'}
  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>
    );
  }
}

运行上面的代码会记录以下内容并引发错误“Unknown validator message”

.. I ReactNativeJS: 't@t.cl', 'j'
.. I ReactNativeJS: { email: 't@t.cl' }, { 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: 'email@example.com'}
      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。该错误消息中的单词选中表示该问题。这意味着 checked （在我的情况下）和 minimum （在你的情况下）属性在约束json中的错误位置使用。或，它位于正确的json块中，但该块中的一个或多个其他属性不应存在，并且validate.js解析器使用该块中的第一个属性报告错误，无论该属性是否正确。我有这个

policy: {
presence: true,
checked: true}

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

在React Native上使用validate.js时出错 - 最小未知验证程序

4 个答案: