使用框架如何写一个含验证码的登录界面

一个包含用户名，密码，验证码的简单的登陆界面，如下图所示：

首先是超文本标记语言代码：

div id=' DiVid ' div style='底色：透明；'表单id=' ff '方法=' post ' ul class=' reg-box ' Li标签为=' '账号/标签输入类型=' text ' name=' accName ' value=' class=' account ' maxlength=' 11 ' style=' color : # 999；onbulr=' textBlur(this)' onFocus=' textFocus(this)'/span class=' error 5 '/span/Li Li标签为=' '密码/标签输入类型=' password ' name=' accPassWord ' class=' admin _ pwd ' value=' style=' color : # 999；'onbulr=' textBlur(this)' onFocus=' textFocus(this)'/span class=' error 6 '/span/Li Li标签为=' '验证码/标签输入类型=' text ' class=' srad photo key ' id=' key ' value=' style=' color : # 999；ime-mode :禁用；-web kit-ime-mode :未激活；oncolor=' textBlur(this)' onFocus=' textFocus(this)'/span class=' add PhoKey '/span span class=' error 7 '/span/Li/ul div class=' sub '输入类型='submit '值='立即登录//div /form /div/div然后是实现验证用户的输入是否正确的射流研究…代码：

//文本框默认提示文字函数TextFocus(El){ if(El。DefaultVaLue==El。值){ El。值=' '；埃尔。风格。color=' # 333} }函数文本模糊。value==' '){ El。值=El。DefaultValue埃尔。风格。color=' # 999}}$(function(){ /*生成验证码*/create _ code()；//登录页面的提示文字//账户输入框失去焦点（函数login_validate(){ $(').注册箱。帐户')。模糊（函数(){ //reg=/^1[3|4|5|8][0-9]\d{4,8}$/i；//验证手机正则（输入前七位至11位)if($(this).val()==''|| $(this).val()=='请输入您的账号){ $(这个)。添加CLaSS(' ERROR c ')；$(这个)。下一个()。html(")账号不能为空!');$(这个)。下一个()。css('display '，' block ')；$('.子输入')。prop('disabled '，true)；}//else if($(').注册箱。帐户')。val(。长度11)/{//$(这个).添加CLaSS(' ERROR c ')；//$(这个)。下一个()。html(")账号长度有误！');//$(这个)。下一个()。css('display '，' block ')；//}//else if(！reg.test($(').注册箱。帐户')。val()))//{/$(this).添加CLaSS(' ERROR c ')；//$(这个)。下一个()。html(")账号不存在!');//$(这个)。下一个()。css('display '，' block ')；//} else { $(' .子输入')。prop('disabled '，false)；$(这个)。添加类(' CheckEdn ')；$(这个)。移除CLaSS(' ERROR c ')；$(这个)。下一个()。empty()；} });/*密码输入框失去焦点*/$('.注册箱admin _ pwd’).模糊（函数(){ //reg=/^[\@A-Za-z0-9\！\#\$\%\^\\*\.\~]{6,22}$/;if($(this).val()==''){ $(this).添加CLaSS(' ERROR c ')；$(这个)。下一个()。html(")密码不能为空！');$(这个)。下一个()。css('display '，' block ')；$('.子输入')。prop('disabled '，true)；}//else if(！reg.test($(').admin _ pwd’).val())) {//$(this).添加CLaSS(' ERROR c ')；//$(这个)。下一个()。html(")密码为6~12位的数字、字母或特殊字符!');//$(这个)。下一个()。css('display '，' block ')；//} else { $(' .子输入')。prop('disabled '，false)；$(这个)。添加类(' CheckEdn ')；$(这个)。移除CLaSS(' ERROR c ')；$(这个)。下一个()。empty()；} });/*验证码输入框失去焦点*/$('.注册箱照片键').模糊(函数(){ var code1=$(').reg-box input.photokey ').val().toLowerCase()；var code2=$(' .注册箱phoKey ').文本()。toLowerCase()；如果(代码1!=code2) { $(this).添加CLaSS(' ERROR c ')；$(这个)。下一个()。下一个()。html(")验证码输入错误！');$(这个)。下一个()。下一个()。css('display '，' block ')；$('.子输入')。prop('disabled '，true)；} else { $(' .子输入')。prop('disabled '，false)；$(这个)。移除CLaSS(' ERROR c ')；$(这个)。下一个()。下一个()。empty()；$(这个)。添加类(' CheckEdn ')；} }) })();});函数create_code()用于生成验证码：

function create _ code(){ function shuffle(){ var arr=[' 1 '，' R '，' Q '，' 4 '，' S '，' 6 '，' W '，' U '，' D '，' I '，' A '，' B '，' C '，' D '，' E '，' F '，' G '，' H '，' I '，' J '，' K '，' L '，' N '，' O '，' P '，' Q '，' 2 '，' S '，' T '，' 8 '，' V '，'sort(function(){ return(math。random()-。5);});};shuffle()；函数show _ code(){ var ar1=' '；var code=shuffle()；for(var I=0；i6；i ) { ar1=代码[一]；} ;//var ar=ar1。join(')；$('.注册箱phoKey ').文本(ar1)；};show _ code()；$('.注册箱phoKey ').单击(function(){ show _ code()；});}最后是非常重要的半铸钢钢性铸铁(铸造半钢)代码：

正文{ background : # 000 } # Divid { position :固定；左： 47%;前：名53%；宽度： 500像素；边距-左侧：-200像素；边距-top :-150 px；字体系列： '黑体；/*禁止复制粘贴*/-moz-用户-选择：无；-网络工具包-用户-选择：无；用户选择：无；color: # fff}。register _ dialog _ info { float : left；边距-左侧：10 pxcolor: # fff边距-top : 5px；font-size : 20px}表单{ padd : 20px 0px } ul Li { list-style : none；} .sub { text-align : center} .子输入{显示： in-block；宽度： 300像素；背景色： # 012246;color: rgb(255，255，255)；font-size : 20px文本对齐：中心；高度： 40px线高： 40px字体系列：黑体；大纲：无；border:无；margin : auto order-radius : 10px；}输入[type=' submit ']:悬停{光标：指针；} .reg-box { padding-left : 30px；} .reg-box Li {行高： 44px宽度： 500像素；飞越：隐藏；} .注册箱li标签{ width: 68px高度： 50px向左浮动：线高： 50px文本对齐：右侧；填充-右侧： 20px} .注册箱li输入，注册箱li选择{ border-radius : 3pxpadd : 6px 0；font-size : 16px宽度： 296像素；高度： 49px线高： 28pxborder: 1px固体# ddddtext-缩进： 0.5 em向左浮动：} .注册箱li选择选项{ font-size :16 px} /*验证码*/.添加{宽度： 128像素重量： 44像素向左浮动：_display:内联；光标：指针；左边距left: 20px}。李注册箱srad { width : 148 pxtext-indent : 4px；font-size : 14px} .李注册箱。输入代码{ width : 106 pxpadding : 10pxfont-family : Arial；字体样式：斜体；颜色：红色；字母间距1pxcursor:指针；文本对齐：中心；文本缩进： ^ 0；} .yzm .phoKey { background: # 012246文本对齐：中心；线高： 44pxcolor : # fffborder-radius : 3px；} .phoKey {字母间距： 3pxfont-size :18 px} .yzmc { background: # dddddd文本对齐：中心；线高： 44pxcolor: # 999}。错误{ clear:both显示：块；颜色：红色；左填充左侧： 90px填充-底部：5 px高度：20 px向左浮动：font-size :12 px线高： 20px}输入{底色： # fff大纲：无；} .reg-box Li {宽度：自动；} .reg-box li input.errorC .errorC{ border: 1px纯蓝；} .reg-box li input.checkedN .检查edn { border : 1px solid # 1ece 6d；}以上所述是小编给大家介绍的如何写一个含验证码的登录界面详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！