Question

我无法使用文档建议的代码覆盖redux-form-validators中的默认错误消息：

Object.assign(Validators.messages, {
    required: "This is a required field"
})

这会导致错误

未定义验证符

问题：这个Validators对象是什么？我们应该在哪里/如何定义/使用它，以便我们可以正确覆盖默认消息？

/containers/Animals/Animals.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { required } from 'redux-form-validators';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    constructor(props) {
        super(props);
        Object.assign(Validators.messages, {                // ERROR OCCURS HERE
            required: "This is a required field"
        })
    }

    render() {
        return (
            <div>
                <form>                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                            validate={[required()]}
                        />  
                </form>
            </div>
        )
    }

}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal'
})(AnimalForm))

Answer 1

我建议您使用let x = [12,2,3.5,4,-29]; let squared = x.filter((a) => a>0 && Number.isInteger(a)).map((a) => a**2);的内置功能进行验证，以便更好地控制代码库。而且，最好将表格分开，而不是将表格放在感觉有点奇怪的容器中。我通常会执行以下操作：

我已经为表单创建了一个无状态组件，因为我们不打算更改该组件内部的状态。

forms / animal.form.js

redux-form

当您尝试使用“提交”按钮提交表单时，将从import React from 'react'; import { connect } from 'react-redux'; import { reduxForm, Field } from 'redux-form'; import { renderTextField } from './FormHelpers'; import validate from './validate'; import submit from './submit'; let AnimalForm = (props) => { const { handleSubmit, submitting, } = props; return ( <div> <form onSubmit={handleSubmit}> <Field label="Longitude" name="longitude" component={renderTextField} type="text" /> <button type="submit" disabled={submitting}>Submit</button> </form> </div> ); }; AnimalForm = reduxForm({ form: 'animal', onSubmit: submit, validate, })(AnimalForm); export default AnimalForm;中调用validate函数。在此函数内进行所有验证。您甚至可以使用正则表达式进行验证。

forms / validate.js

validate.js

一旦没有验证错误，就会调用const validate = (values) => { const errors = {}; if (!values.longitude) { errors.longitude = 'This is a required field'; } return errors; }; export default validate;中的Submit函数。

forms / submit.js

submit.js

希望这会有所帮助。干杯。

Answer 2

尝试将验证器添加到您的导入

if (a=== null && b=== null&& c=== null&& d=== null&& e=== null &&...&& n===null){
// set some field to false
}

Answer 3

如果要全局替代消息，请在ServletContextConfig或某些全局位置使用<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> <head> <meta charset="UTF-8"/> <title>blah blah</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> </head> <body style="text-align: center;"> <div sec:authentication="true"> authentication - always </div> <div sec:authentication="false"> authentication - never </div> <div class="container" sec:authentication="isAnonymous()"> authentication - anonymous </div> <div class="container" sec:authentication="!isAnonymous()"> authentication - not anonymous </div> <div class="container" sec:authentication="isAuthenticated()"> authentication - authenticated </div> <div class="container" sec:authentication="!isAuthenticated()"> authentication - not authenticated </div> <div sec:authorize="true"> authorize - always </div> <div sec:authorize="false"> authorize - never </div> <div class="container" sec:authorize="isAnonymous()"> authorize - anonymous </div> <div class="container" sec:authorize="!isAnonymous()"> authorize - not anonymous </div> <div class="container" sec:authorize="isAuthenticated()"> authorize - authenticated </div> <div class="container" sec:authorize="!isAuthenticated()"> authorize - not authenticated </div> <strong> Username: <span sec:authentication="name"></span> </strong> <div th:text="${#authorization.getAuthentication()}">1</div> <div th:text="${40}">1</div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>方法-在组件内部进行操作是一个非常糟糕的主意。要在全球范围内这样做：

Object.assign

查看示例代码，如果您只想为组件覆盖它，那么在本地进行处理会更好：

index.js

覆盖redux-form-validators中的默认消息

3 个答案: