在提交表单时,为了防止自动程序提交,一般提供有验证码。
一般都是在提交表单后在服务器端检测验证码是否正确,如错误则阻止表单提交。
为了提高体验,有的在Form的submit前使用ajax来提前检测验证码是否正确。
这样还要请求服务器,就想何不使用如下方法,来实现js在客户端验证。
步骤
页面加载时,加载验证码图片,和验证码密码。
验证码密码在服务器端生成,生成规则为 md5(验证码+固定随机码) 来生成。固定随机码只是为了防止md5暴力破解。
客户端在提交表单前使用js检测验证码是否正确。方法为:将用户输入的验证码加上固定随机码 在js使用md5运算后,与验证码密码比较,如不一样则验证码错误。阻止提交表单。
原理
此方法的核心原理就是利用了md5唯一性和无法反向破解的特性。
举一反三,此种方法也可验证其他用户输入。可能还可应用到 修改密码,验证密保等等。
可能你还很糊涂,不知道怎么表达清楚。举个实例。
实例
1 生成验证码 [5u6t9f]
2 将验证码存储在服务器端的session中,并生成 验证码密码[332AWGD] = md5(验证码[5u6t9f]+固定随机码[21EC2020])
3 客户端加载页面,页面中包含根据验证码生成的验证图片、验证码密码[332AWGD]、固定随机码[21EC2020]
4 提交表单前js通过同样算法 计算验证码密码=md5(用户输入验证码+固定随机码[21EC2020]) 计算出 新的验证码密码和系统的验证码密码[332AWGD]比较就可知道验证码是否正确了。
注意:此种方法只是为了优化用户体验,因为高手可跳过JS验证,所以在服务器端还必须对用户输入的验证进行检测。
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具