上一篇
想象一下,你正在开发一个用户注册系统👥,要求用户必须填写中文姓名,如果没有输入限制,用户可能输入英文、数字甚至特殊符号,导致数据混乱😱,更糟糕的是,恶意用户可能通过注入非法字符攻击系统💥!这时候,汉字输入限制就成了保障数据安全和用户体验的关键武器✨。
在用户提交表单前,通过前端验证快速过滤非汉字内容,并给出实时提示💡,以下是关键代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8">汉字输入验证</title> <script> function validateChinese(event) { const input = event.target; const value = input.value.replace(/[^\u4e00-\u9fa5]/g, ''); // 过滤非汉字 input.value = value; // 实时修正输入 // 可选:添加错误提示 if (value === '') { alert('请输入汉字!'); } } </script> </head>body> <form onsubmit="validateChinese(event)"> <label>中文姓名:</label> <input type="text" oninput="validateChinese(event)"> <button type="submit">提交</button> </form> </body> </html>
💡 技巧说明:
/[^\u4e00-\u9fa5]/g
匹配所有非汉字字符并替换为空。oninput
事件实现实时过滤,用户输入时立即修正。onsubmit
阻止非法内容提交。前端验证容易被绕过(比如禁用 JavaScript),因此必须通过服务器端代码进行二次校验🔒,以下是 ASP 经典实现:
<% Function IsChinese(str) Dim i, charCode IsChinese = True For i = 1 To Len(str) charCode = AscW(Mid(str, i, 1)) If charCode < &H4E00 Or charCode > &H9FA5 Then IsChinese = False Exit For End If Next End Function ' 表单提交处理 If Request.ServerVariables("REQUEST_METHOD") = "POST" Then Dim userInput userInput = Trim(Request.Form("chineseInput")) If IsChinese(userInput) Then Response.Write("✅ 输入合法:" & userInput) Else Response.Write("❌ 请输入纯汉字!") End If End If %>form method="post"> <label>中文内容:</label> <input type="text" name="chineseInput"> <button type="submit">提交</button> </form>
💡 技巧说明:
IsChinese
函数遍历每个字符,检查 Unicode 编码是否在 &H4E00
(十进制 19968)到 &H9FA5
(十进制 40869)之间。AscW
获取字符的 Unicode 编码,兼容双字节字符。Trim
去除首尾空格,提升数据干净度。paste
事件中拦截粘贴内容并过滤:input.addEventListener('paste', (e) => { const text = e.clipboardData.getData('text'); e.preventDefault(); const filtered = text.replace(/[^\u4e00-\u9fa5]/g, ''); input.value = filtered; });
/[\u4e00-\u9fa5\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\u{2ceb0}-\u{2ebef}]/u
(需浏览器支持 ES6 Unicode 属性转义)
U+4E00
~U+9FFF
(常用汉字)U+3400
~U+4DBF
(古籍用字)U+20000
~U+2A6DF
(生僻字、方言字)AscW
函数时,确保网页编码为 UTF-8,避免乱码。通过这套“前端+后端”的双重验证机制,既能提升用户体验,又能筑牢数据安全防线🛡️!赶紧在你的 ASP 项目中试试看吧~
本文由 业务大全 于2025-08-22发表在【云服务器提供商】,文中图片由(业务大全)上传,本平台仅提供信息存储服务;作者观点、意见不代表本站立场,如有侵权,请联系我们删除;若有图片侵权,请您准备原始证明材料和公证书后联系我方删除!
本文链接:https://xdh.7tqx.com/wenda/694348.html
发表评论