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

What I have been working on is a text input that 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.

我一直在做的是一个文本输入，在用户输入时缩小

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.

我想我可以做一些像这样的东西，但它仍然允许在文本框中输入其他字符。

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>
    ); 
}

2 个解决方案

#1

That's easy. You:

这很容易。您：

Remove the pattern attribute.
删除模式属性。
Register your onInputChange method for input events instead of change events (onInput={event => this.onInputChange(event.target.value)}).
为输入事件而不是更改事件注册onInputChange方法（onInput = {event => this.onInputChange（event.target.value）}）。
Clean up the received value in the onInputChange before changing the state.
在更改状态之前清除onInputChange中的接收值。

#2

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.

因此，您目前具有缩小用户类型的

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.

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

#1