您好,登錄后才能下訂單哦!
這篇文章主要介紹“Ajax怎么實(shí)現(xiàn)帶提示的驗(yàn)證表單”,在日常操作中,相信很多人在Ajax怎么實(shí)現(xiàn)帶提示的驗(yàn)證表單問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”Ajax怎么實(shí)現(xiàn)帶提示的驗(yàn)證表單”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
本文實(shí)例講述了Ajax帶提示的驗(yàn)證表單。分享給大家供大家參考。具體如下:
這是一個(gè)常用的Ajax表單驗(yàn)證程序,實(shí)時(shí)提示你輸入的字符是否符合要求,簡潔明快,便于修改,這是用JavaScript實(shí)現(xiàn)的,沒有摻雜其它的框架類代碼,因此比較實(shí)用。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-ajax-table-check-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>帶提示的Ajax驗(yàn)證表單</title> <style type="text/css"> form { width:500px; border:1px solid #ccc; } fieldset { border:0; padding:10px; margin:10px; position:relative; } label { display:block; font:normal 12px/17px verdana; } input {width:160px;} span.hint { font:normal 11px/14px verdana; background:#eee url(images/bg-span-hint-gray.gif) no-repeat top left; color:#444; border:1px solid #888; padding:5px 5px 5px 40px; width:250px; position:absolute; margin: -12px 0 0 14px; display:none; } fieldset.welldone span.hint { background:#9fd680 url(images/bg-span-hint-welldone.jpg) no-repeat top left; border-color:#749e5c; color:#000; } fieldset.kindagood span.hint { background:#ffffcc url(images/bg-span-hint-kindagood.jpg) no-repeat top left; border-color:#cc9933; } fieldset.welldone { background:transparent url(images/bg-fieldset-welldone.gif) no-repeat 194px 19px; } fieldset.kindagood { background:transparent url(images/bg-fieldset-kindagood.gif) no-repeat 194px 19px; } </style> <script type="text/javascript"> function checkUsernameForLength(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; if (txt.length > 5) { fieldset.className = "welldone"; } else { fieldset.className = ""; } } function checkPassword(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; if (txt.length > 3 && txt.length < 8) { fieldset.className = "kindagood"; } else if (txt.length > 7) { fieldset.className = "welldone"; } else { fieldset.className = ""; } } function checkEmail(whatYouTyped) { var fieldset = whatYouTyped.parentNode; var txt = whatYouTyped.value; if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) { fieldset.className = "welldone"; } else { fieldset.className = ""; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){ inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } addLoadEvent(prepareInputsForHints); </script> </head> <body> <form action="#" name="basicform" id="basicform" > <fieldset> <label for="username">用戶名:</label> <input type="text" id="username" onkeyup="checkUsernameForLength(this);" /> <span class="hint">用戶名最低6位哦</span> </fieldset> <fieldset> <label for="password">密碼:</label> <input type="password" id="password" onkeyup="checkPassword(this);" /> <span class="hint">密碼需要4到8位哦</span> </fieldset> <fieldset> <label for="email">Email地址:</label> <input type="text" id="email" onkeyup="checkEmail(this);" /> <span class="hint">You can enter your real address without worry - we don't spam!</span> </fieldset> </form> </body> </html>
到此,關(guān)于“Ajax怎么實(shí)現(xiàn)帶提示的驗(yàn)證表單”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。