reactjs中的空格验证

Question

我希望用户在单击提交按钮时阻止添加空格。我在句柄更改中显示警报消息，因此如果用户添加空格，它将显示。

但我想在句柄提交中显示警报消息。

下面是我的代码：

 handleChange(event) {
    let reWhiteSpace = new RegExp(/\s/);
    var errors = {}
     if (event.target.id === 'userID') {
        this.setState({ userID: event.target.value })
        errors.userID = reWhiteSpace.test(event.target.value)
        if (errors.userID) {
            this.setState({
                alertMessage: "Spacing Not Allowed",
                showAlert: true,
                alertcolor: "warning"
            })
        } 
    }

    this.setState({
        errors: errors
    })
}

 handleSubmit(event) {
    event.preventDefault();
    console.log('form submission data', this.state);
    var data = this.state;
    if (this.state.userID !== '' ) {
        const requestOptions = {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }),
            body: JSON.stringify(data)
        };
        console.log(requestOptions)
        fetch(API_URL, requestOptions)
            .then(res => res.json())
            .then((data) => {
                console.log(data)
                if (data.status) {
                    window.location = '/user-list'
                    if (data.message !== "") {
                        this.setState({
                            alertMessage: data.message,
                            showAlert: true,
                            alertcolor: "success"
                        })
                    }
                }
                else if (data.message !== "") {
                    console.log('else', data.message)
                    this.setState({
                        alertMessage: data.message,
                        showAlert: true,
                        alertcolor: "warning"
                    })
                }
            })
            .catch(console.log)
    }
    else {
        this.setState({
            alertMessage: "Please enter all required fields",
            showAlert: true,
            alertcolor: "warning"
        })
    }
}

我想检查句柄提交中的空白验证 有什么建议吗？

Answer 1

由于您将errors存储在状态中，因此您也可以在handleSubmit中检查它：

handleSubmit(event) {
    event.preventDefault();
    if (this.state.errors && this.state.errors.userID) {
        this.setState({
            alertMessage: "Please enter all required fields",
            showAlert: true,
            alertcolor: "warning"
        })
        return;
    }

    console.log('form submission data', this.state);
    var data = this.state;
    if (this.state.userID !== '' ) {
        const requestOptions = {
            method: 'POST',
            headers: new Headers({
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            }),
            body: JSON.stringify(data)
        };
        console.log(requestOptions)
        fetch(API_URL, requestOptions)
            .then(res => res.json())
            .then((data) => {
                console.log(data)
                if (data.status) {
                    window.location = '/user-list'
                    if (data.message !== "") {
                        this.setState({
                            alertMessage: data.message,
                            showAlert: true,
                            alertcolor: "success"
                        })
                    }
                }
                else if (data.message !== "") {
                    console.log('else', data.message)
                    this.setState({
                        alertMessage: data.message,
                        showAlert: true,
                        alertcolor: "warning"
                    })
                }
            })
            .catch(console.log)
    }
    else {
        this.setState({
            alertMessage: "Please enter all required fields",
            showAlert: true,
            alertcolor: "warning"
        })
    }
}

如果您只想在字符串的开头/结尾检查空格，您可以使用trim() 方法而不是您的正则表达式：

function checkWhiteSpace(text) {
  const _text = text.trim();
  return text === _text;
}

您还可以避免所有这些空白验证，并在使用string.trim() 方法发送您的请求之前以编程方式将其删除。你可以read more here