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

Posted 2023-02-22

【中文标题】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 可以防止这种情况发生，即使有人不小心输入了其中一个字符。 （是的，大多数用户都没有看控制台）。

【参考方案1】：

这很容易。你：

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

【讨论】：

但是说真的，客户端 JS 和安全检查？ :(。您首先应该重新考虑是否需要它。

这与安全无关 - 它与用户体验有关。当您可以立即验证您的输入时，您是否愿意等待服务器验证您的输入？

当你移除 onChange 处理程序并改用 onInput 时，React 将抛出一个控制台错误，抱怨缺少 onChange。为了抑制这种情况，您可以创建一个不执行任何操作的 onChange 处理程序，如下所示： onChange=() =>

【参考方案2】：

在此处详细检查我的答案： https://***.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);