react-redux 相关问题

我一直在研究的是一种文本输入，当用户键入时，它会缩小的范围。它正在工作，但我现在关心的是安全性，用户传递到输入中的内容，... 我一直在研究的是一个文本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> ); } 这很容易。你：删除图案属性。为 onInputChange 事件注册您的 input 方法，而不是 change 事件 (onInput={event => this.onInputChange(event.target.value)})。在改变状态之前清理onInputChange中接收到的值。在这里查看我的详细答案： 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, "")); } 对于 React Typescript 用户。我发现这个片段非常有帮助...... 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); } 或者完成这项工作的最简单方法是，将 handleSubmit 功能作为 onSubmit={handleSubmit}< form > 放在标签中，而不是单独放在按钮上。这也将使其他输入属性（例如模式、类型、必需）成为必需。输入“pattern”属性仅适用于表单元素内的输入。你可以试试这个例子作为参考。 const [inputValue, setInputValue] = useState(''); <form onSubmit={(e) => e.preventDefault()}> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} pattern="[A-Za-z]{3,}" title="Only letters allowed, minimum 3 characters" required /> <button type="submit">Submit</button> </form> 因此，您当前具有在用户键入时缩小 <select> 选项的功能，现在您关心的是通过限制用户能够作为输入提交的内容来提高安全性。这个问题的答案是不可能通过客户端验证来保护输入；它必须通过服务器端验证来完成。客户端安全检查很容易被绕过。服务器收到输入后必须对其进行检查，以确保其不是恶意的。

javascript regex html reactjs react-redux

回答 0 投票 0

react-redux 相关问题

最新问题