javascript 输入模式='[a-zA-Z]' 在 React 应用程序中不起作用

input pattern='[a-zA-Z]' is not working in React application

提问by eox.dev

What I have been working on is a text inputthat narrows down <option>in a <select>as the user types. It is working, but my concern now is security, what a user passes into the input, and potential malicious entries.

我一直在努力是一个文本input变窄下来<option>在<select>按照用户类型。它正在工作，但我现在担心的是安全性、用户传入的内容input以及潜在的恶意条目。

I figured I could do something like <input placeholder='[a-zA-Z]' />but it is still allowing other characters to be entered into the text box.

我想我可以做类似的事情，<input placeholder='[a-zA-Z]' />但它仍然允许在文本框中输入其他字符。

What am I doing wrong here, and what would be an alternative that would permit only alphanumeric being entered?

我在这里做错了什么，什么是只允许输入字母数字的替代方法？

onInputChange(term) {
    this.setState({ term });
}

renderOptionsSelect(term) {
    return _.map(this.props.pos_list, p => {
        var searchTerm = this.state.term.toLowerCase();
        if (p.pos_code.toLowerCase().match(searchTerm)) {
            return (
                <option key={p.pos_code} value={p.pos_code}>{p.pos_code}</option>
            );                        
        }
    });
}

// render the main element of the container
render() {
    return (
        <div className='panel panel-default'>
            <div className='panel-heading'>
                <h4><strong>Basic Query</strong></h4>
            </div>

            <div className='panel-body'>
                <input 
                    pattern='[a-zA-Z]'
                    className='form-control' 
                    placeholder='Enter Keyword or Position Code' 
                    value={this.state.term}
                    onChange={event => this.onInputChange(event.target.value)}
                />

                <hr />
                <h4>Position:</h4>
                <select className='form-control'>
                    <option></option>
                    {this.renderOptionsSelect()}
                </select>
                <br />
                <h4>Data Cut:</h4>
                <select className='form-control' disabled={true} />

            </div>
        </div>
    ); 
}

采纳答案by Luka ?itnik

That's easy. You:

这很容易。你：

1. Remove the pattern attribute.
2. Register your onInputChangemethod for inputevents instead of changeevents (onInput={event => this.onInputChange(event.target.value)}).
3. Clean up the received value in the onInputChangebefore changing the state.

1. 删除模式属性。
2. onInputChange为input事件而不是change事件 ( onInput={event => this.onInputChange(event.target.value)})注册您的方法。
3. onInputChange在改变状态之前清理接收到的值。

回答by Josh Withee

So you currently have the functionality of narrowing down the options of the <select>as the user types, and now your concern is increasing security by limiting what the user is able to submit as input.

因此，您目前具有在<select>用户键入时缩小选项的功能，现在您关心的是通过限制用户能够作为输入提交的内容来提高安全性。

The answer to this concern is that it is not possible to secure input with client-side validation; it must be done with server-side validation.

这个问题的答案是不可能通过客户端验证来保护输入；它必须通过服务器端验证来完成。

Client-side security checks can easily be bypassed. The input must be checked when it is received by the server in order to make sure that it is not malicious.

可以轻松绕过客户端安全检查。当输入被服务器接收时必须检查输入以确保它不是恶意的。