JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息的具體代碼,供大家參考,具體內(nèi)容如下
效果展示:
代碼展示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="fontss2/iconfont.css" rel="external nofollow" /> <style> .orginal { font-size: 13px; color: deepskyblue; } .wrong { font-size: 13px; color: red; } .right { font-size: 13px; color: green; } </style> </head> <body> <p> <input type="text"><span class="orginal icon-wenhao iconfont">請(qǐng)輸入6-16位密碼</span> </p> <script> //獲取元素對(duì)象 var input = document.querySelector('input'); var span = document.querySelector('span'); // 注冊(cè)事件 失去焦點(diǎn)事件 input.onblur = function() { if (input.value.length > 0 && input.value.length < 6 || input.value.length > 16) { span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang wrong'; span.innerHTML= '輸入錯(cuò)誤請(qǐng)輸入6-16位密碼'; }else if(input.value.length >=6 && input.value.length <=16) { span.className = 'iconfont icon-yiyanzheng right'; span.innerHTML = '輸入正確'; }else { span.className = 'orginal icon-wenhao iconfont'; span.innerHTML = '請(qǐng)輸入6-16位密碼'; } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中最容易混淆的作用域、提升、閉包知識(shí)詳解(推薦)
在web前端開發(fā)中js中的作用域,提升,閉包知識(shí)是經(jīng)常用到的也是很容易混淆的知識(shí)點(diǎn),接下來(lái)小編整理了本教程幫助大家學(xué)習(xí)2016-09-09javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼
這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎(呵呵我用其作默認(rèn)主頁(yè)),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖2010-01-01JavaScript實(shí)現(xiàn)身份證驗(yàn)證代碼
本文給大家分享的是使用javascript實(shí)現(xiàn)身份驗(yàn)證的規(guī)則以及代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2016-02-02原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02uniapp實(shí)現(xiàn)全局變量的幾種方式總結(jié)
這里說(shuō)全局變量,著重指的是能夠全局動(dòng)態(tài)響應(yīng)的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)全局變量的幾種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10JS實(shí)現(xiàn)簡(jiǎn)單易用的手機(jī)端浮動(dòng)窗口顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單易用的手機(jī)端浮動(dòng)窗口顯示效果,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作相關(guān)技巧,適用于做廣告展示,需要的朋友可以參考下2016-09-09Firefox中autocomplete="off" 設(shè)置不起作用Bug的解決方法
在實(shí)現(xiàn)補(bǔ)全提示功能時(shí)(Suggest),都會(huì)給輸入框(Input)元素添加autocomplete屬性,且值設(shè)為off。2011-03-03