html前端验证代码,前端js+html实现简单验证码

前些日子接触到一个项目，要求实现一个简单的验证码，参考万能的百度结合自己的想法实现了一个简单的前端验证码，当然跟后台的不能比安全性，

页面部分：

验证码js实现部分：

var code ; //在全局定义验证码

//产生验证码

function createCode(){

code = "";

var codeLength = 4;//验证码的长度

var checkCode = document.getElementById("code");

var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//随机数

for(var i = 0; i < codeLength; i++) {//循环操作

var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)

code += random[index];//根据索引取得随机数加到code上

}

checkCode.value = code;//把code值赋给验证码

}

//校验验证码

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

alert("请输入验证码！"); //则弹出请输入验证码

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

alert("验证码输入错误！@_@"); //则弹出验证码输入错误

createCode();//刷新验证码

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦验证码框

YZM = false;

}

else { //输入正确时

$("#Yzm").blur();//绑定验证码输入正确时要做的事

YZM = true;

}

};附效果图：

html前端验证代码,前端js+html实现简单验证码相关推荐

利用strut2标签自动生成form前端验证代码
利用strut2标签自动生成form前端验证代码,使用到的技术有 1.struts2标签,如<s:form> <s:textfieled> 2.struts2读取*Valida ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
前端验证代码 - JS
http://topic.autohome.com.cn/zt/2012/04/BHMC-autoshow/ function $(id) {return document.getElementByI ...
html短信验证代码是什么意思,如何让验证码显示出来在手机找到短信选项并进入...
怎么让手机的验证码直接跳到屏幕上? 手机屏幕上方不出现验正码,很不方便,请问怎么设...那个叫做悬浮窗口,可以在通知管理里面设置的. 也有的在其它权限里面,手机品牌厂家不同也不一样. 华为plus10 ...
html简单验证码,js+html制作简单验证码
本文实例为大家分享了JavaScript制作验证码的具体代码,供大家参考,具体内容如下 js验证码 #login{ width:50px; height:30px; line-height:30px; ...
阿发你好java_191122_01 纯前端JS实现的文字验证码
纯前端JS实现的文字验证码作者:邵发本文是Java学习指南系列教程的官方配套文档.内容介绍一种基于JavaScript绘制的纯前端实现的验证码技术.本文附带项目源码及相关JAR包. 1. 验证码 ...
【文件上传绕过】——前端检测_前端js验证漏洞
文章目录一.实验目的: 二.工具: 三.实验环境: 四.实验目的: 五.漏洞说明: 1. 漏洞原理: 2. `js前端验证`过程代码: 六.实验过程: 1. 判断是否存在前端`js绕过漏洞`: 1. ...
js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
JS实现的一个验证码，可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确输入的邮箱格式是否正确验证成功后才提交action到后台 1<!DOCTYPE html PUBLIC "-//W3C// ...
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用页面如下: 代码: <!DOCTYPE html> <html><head><script ...

html前端验证代码,前端js+html实现简单验证码

html前端验证代码,前端js+html实现简单验证码相关推荐

最新文章

热门文章