摘要:頁(yè)面用戶名密碼密碼強(qiáng)度驗(yàn)證碼登錄代碼塊彈出消息框簡(jiǎn)單的驗(yàn)證碼驗(yàn)證碼背景顏色驗(yàn)證碼顏色長(zhǎng)度二元運(yùn)算符強(qiáng)中弱去空格防止注入用戶名密碼不能為空用戶名密碼為為位但不限于數(shù)字,字母,下劃線刷新頁(yè)面兩個(gè)參數(shù)為提示密碼強(qiáng)弱提示性文字,接受
html 頁(yè)面
用戶名:JS代碼塊
密碼:
密碼強(qiáng)度:
驗(yàn)證碼:
var module = (function() { var testSpan,msg,Slength,userpwd,userpwd,yzm; function print(msg) { alert(msg); } ;//彈出消息框 //簡(jiǎn)單的驗(yàn)證碼 function createyzm(testSpan,Slength){ var str = "0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM"; var list = str.split(""); for (i = 0; i < Slength; i++) { var index = Math.floor(Math.random() * list.length); testSpan.style.backgroundColor="#000";//驗(yàn)證碼背景顏色 testSpan.style.color="#fff";//驗(yàn)證碼顏色 testSpan.style.display="block"; testSpan.style.textAlign ="center"; testSpan.style.width="70px";//長(zhǎng)度 testSpan.innerHTML += list[index]; } return testSpan.innerHTML; }; function checkUserpwd(userpwd,errSpan) { var numCount = (/[0-9]/g).test(userpwd) ? 1 : 0; var lowCount = (/[a-z]/g).test(userpwd) ? 1 : 0; var uppCount = (/[A-Z]/g).test(userpwd) ? 1 : 0;//二元運(yùn)算符 switch (numCount + lowCount + uppCount) { case 3: errSpan.innerHTML = "強(qiáng)"; break; case 2: errSpan.innerHTML = "中"; break; default: errSpan.innerHTML = "弱"; break; return true; } }; function check(username,userpwd){ var uremeber = /^[a-zA-Z0-9_-]{4,16}$/; var username=username.replace(" ",""); var userpwd=userpwd.replace(" ","");//去空格防止sql注入 if(username==""||userpwd=="") { print("用戶名密碼不能為空"); return false; } if(!uremeber.test(username)||!uremeber.test(userpwd)){ print("用戶名密碼為為4-16位但不限于(數(shù)字,字母,下劃線)"); history.go(0);//刷新頁(yè)面 return false; }else { //... return true; } }; return { checkUserpwd: checkUserpwd,//兩個(gè)參數(shù)userpwd,errSpan errspan為提示密碼強(qiáng)弱提示性文字,接受類型是js dom對(duì)象 注:jq對(duì)象用test方法, // userpwd 為用戶密碼, check: check,//用戶名,密碼,驗(yàn)證碼 createyzm: createyzm,//testSpan,Slength 兩個(gè)參數(shù)testSpan是驗(yàn)證碼span標(biāo)簽dom類型對(duì)象,Slength是驗(yàn)證碼長(zhǎng)度 print: print//alert彈窗 }; })(); var yzm=module.createyzm(document.getElementById("testSpan"),4); document.getElementById("userpwd").onblur = function(){ module.checkUserpwd(this.value,document.getElementById("mm")); } document.getElementById("login").onclick=function(){ var a= module.check(document.getElementById("username").value,document.getElementById("userpwd").value); if(a==true ){ if(document.getElementById("yzm").value==yzm){ alert("登錄成功!"); }else{ alert("驗(yàn)證碼錯(cuò)誤,請(qǐng)重新輸入!"); history.go(0);//刷新頁(yè)面 } } }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/54111.html
摘要:頁(yè)面用戶名密碼密碼強(qiáng)度驗(yàn)證碼登錄代碼塊彈出消息框簡(jiǎn)單的驗(yàn)證碼驗(yàn)證碼背景顏色驗(yàn)證碼顏色長(zhǎng)度二元運(yùn)算符強(qiáng)中弱去空格防止注入用戶名密碼不能為空用戶名密碼為為位但不限于數(shù)字,字母,下劃線刷新頁(yè)面兩個(gè)參數(shù)為提示密碼強(qiáng)弱提示性文字,接受 html 頁(yè)面 用戶名: 密碼: 密碼強(qiáng)度: 驗(yàn)證碼: JS代碼塊 var module = (function() { var testSpan...
摘要:七牛云接入本系統(tǒng)的圖片,音視頻是放在七牛云,所以需要接入七牛云。在服務(wù)端通過(guò)接口請(qǐng)求來(lái)獲取七牛云上傳,客戶端獲取到七牛云,通過(guò)不同方案將帶上。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...
摘要:七牛云接入本系統(tǒng)的圖片,音視頻是放在七牛云,所以需要接入七牛云。在服務(wù)端通過(guò)接口請(qǐng)求來(lái)獲取七牛云上傳,客戶端獲取到七牛云,通過(guò)不同方案將帶上。 效果展示 showImg(https://user-gold-cdn.xitu.io/2018/8/26/16576a709bd02f5f?w=1409&h=521&f=gif&s=30128195); showImg(https://user...
閱讀 3197·2021-11-23 09:51
閱讀 1537·2021-11-22 09:34
閱讀 2846·2021-10-27 14:15
閱讀 2302·2021-10-12 10:17
閱讀 1900·2021-10-12 10:12
閱讀 963·2021-09-27 14:00
閱讀 2009·2021-09-22 15:19
閱讀 1042·2019-08-30 10:51