input pattern='[a-zA-Z]' 在 React 应用程序中不起作用答案

【问题标题】：input pattern='[a-zA-Z]' is not working in React applicationinput pattern='[a-zA-Z]' 在 React 应用程序中不起作用
【发布时间】：2018-06-22 07:54:14
【问题描述】：

我一直在处理的是一个文本input，它在用户键入时缩小了<option> 中的<select>。它工作正常，但我现在担心的是安全性、用户传递到 input 的内容以及潜在的恶意条目。

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

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

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

【问题讨论】：

pattern 属性仅在提交表单时强制执行。像这样限制输入中允许的字符并不容易，在提交时验证输入要容易得多。
Hmmm... 听起来如果我希望验证立即发生，我可能需要在 onInputChange(term) 中进行 JS 验证。
您担心什么样的恶意输入？搜索看起来像是在本地进行的，因此您可以在提交此表单所属的任何内容之前进行验证。您可以验证更改，但它会进一步减慢您的搜索速度，而且似乎没有必要。
另外，我不知道您是否感兴趣或不想要依赖项，但请查看：material-ui.com/#/components/auto-complete。这似乎是你想要的。
恶意输入，而且目前如果有人输入任何 `()`，它会在控制台中生成一个看起来不专业的 RegEx 错误。图 I 可以防止这种情况发生，即使有人不小心输入了其中一个字符。（是的，大多数用户都没有看控制台）。

标签： javascript regex html reactjs react-redux

【解决方案1】：

这很容易。你：

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

【讨论】：

但是说真的，客户端 JS 和安全检查？ :(。您首先应该重新考虑是否需要它。
这与安全无关 - 它与用户体验有关。当您可以立即验证您的输入时，您是否愿意等待服务器验证您的输入？
当你移除 onChange 处理程序并改用 onInput 时，React 将抛出一个控制台错误，抱怨缺少 onChange。为了抑制这种情况，您可以创建一个不执行任何操作的 onChange 处理程序，如下所示： onChange={() => {}}

【解决方案2】：

在此处详细检查我的答案： https://stackoverflow.com/a/68052651/13607767

简单来说就是-

状态

const [tagInputVal, setTagInputVal] = useState("");

输入标签

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

处理函数

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^a-zA-Z\d]/ig, ""));
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

对于 React Typescript 用户。

我发现这个 sn-p 很有帮助……

const regex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%\^&\*])(?=.{8,})");

这个正则表达式强制使用至少：一个数字，一个大写字母、1 个小写字母、1 个特殊字符和 8 个字符长密码。

那你就可以这样用了……

const [strongPassword, setStrongPassword] = useState(false);

function handleChangeValue(event: ChangeEvent<HTMLInputElement>) {
    if (regex.test(event.target.value)) {
        setStrongPassword(true);
    } else {
        setStrongPassword(false);
    }

【讨论】：