JS簡單表單驗(yàn)證功能完整示例
本文實(shí)例講述了JS簡單表單驗(yàn)證功能。分享給大家供大家參考,具體如下:
簡單js表單驗(yàn)證demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script> //當(dāng)用戶名獲取焦點(diǎn)時 function focus_username(){ document.getElementById("user_res").innerHTML="<font color='#f00'>請輸入用戶名</font>"; } //當(dāng)用戶名失去焦點(diǎn)時 function blur_username(){ var user_value=document.getElementsByName("username")[0].value; if(user_value.length===0){ document.getElementById("user_res").innerHTML="<font color='#f00'>你沒有輸入用戶名</font>"; return false; //判斷其長度是否在5~18之間 如果不在就提示用戶 }else if(user_value.length<5||user_value.length>18) { document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名長度必須在5-18之間</font>"; return false; }else if(!checkUser(user_value)){ //用戶名還有特殊符號 document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名含有特殊符號</font>"; return false; }else{ //用戶名合法 document.getElementById("user_res").innerHTML="<font color='#00f'>用戶名合法</font>"; return true; } } //密碼獲取焦點(diǎn)時 function focus_password(){ document.getElementById("pass_res").innerHTML="<font color='#f00'>請輸入密碼</font>"; } //密碼失去焦點(diǎn)時 function blur_password(){ var user_value=document.getElementsByName("password")[0].value; if(user_value.length===0){ document.getElementById("pass_res").innerHTML="<font color='#f00'>你沒有輸入密碼</font>"; return false; //判斷其長度是否在5~18之間 如果不在就提示用戶 }else if(user_value.length<5||user_value.length>18) { document.getElementById("pass_res").innerHTML="<font color='#f00'>用密碼長度必須在5-18之間</font>"; return false; }else{ //密碼合法 document.getElementById("pass_res").innerHTML="<font color='#00f'>密碼合法</font>"; return true; } } function checkUser(user){ var arr=["<",">","#","?","%"]; var arr_length=arr.length; var user_length=user.length; for(var i=0;i<arr_length;i++){ for(var j=0;j<user_length;j++){ if(arr[i]===user.charAt(j)){ return false; } } } //表示用戶名合法 return true; } //提交提交表單驗(yàn)證 function checkForm(){ var user_flag=blur_username(); var pass_flag=blur_password(); if(user_flag && pass_flag){ alert("提交合法表單"); return true; }else{ alert("輸入不合法"); return false; } } </script> </head> <body> <!--action 參數(shù)自定義跳轉(zhuǎn)頁面--> <form name='form1' onsubmit='return checkForm()' action='index.php'> <table width='600' align='center'> <tr> <td align='right' width='150'>用戶名:</td> <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td> <td><span id="user_res"></span></td> </tr> <tr> <td align='right' width='100'>密碼:</td> <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td> <td><span id="pass_res"></span></td> </tr> <tr> <td></td> <td><input type='submit' value='提交' /></td> </tr> </table> </form> </body> </html>
運(yùn)行結(jié)果:
PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:
JavaScript正則表達(dá)式在線測試工具:
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達(dá)式技巧大全》、《JavaScript表單(form)操作技巧大全》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript表單驗(yàn)證示例詳解
- 原生js實(shí)現(xiàn)表單的正則驗(yàn)證(驗(yàn)證通過后才可提交)
- 原生js 實(shí)現(xiàn)表單驗(yàn)證功能
- JavaScript實(shí)現(xiàn)表單驗(yàn)證功能
- JavaScript使用表單元素驗(yàn)證表單的示例代碼
- JavaScript實(shí)現(xiàn)表單注冊、表單驗(yàn)證、運(yùn)算符功能
- JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能完整實(shí)例
- JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能示例
- JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))
- JavaScript實(shí)現(xiàn)表單驗(yàn)證
相關(guān)文章
JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】
這篇文章主要介紹了JS+canvas實(shí)現(xiàn)的五子棋游戲,是采用比較強(qiáng)的AI實(shí)現(xiàn)的人機(jī)大戰(zhàn)版游戲,涉及javascript結(jié)合HTML5實(shí)現(xiàn)圖形繪制與人工智能相關(guān)操作技巧,需要的朋友可以參考下2017-07-07JavaScript Perfection kill 測試及答案
近日,在Perfection kill上看到有關(guān)javascript quiz。并做了一下,最終錯了2個(#2,#9),但是,這2道題,在Ie和ff下的答案是不一樣的?!2010-03-03Typescript井字棋的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了Typescript井字棋的項(xiàng)目實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實(shí)例分析【 5 個區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實(shí)例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別與相關(guān)使用注意事項(xiàng),需要的朋友可以參考下2020-05-05Javascript 的addEventListener()及attachEvent()區(qū)別分析
大家都知道事件的用法就是當(dāng)某個事件(狀況)被觸發(fā)了之后就會去執(zhí)行某個Function, 尤其是Javascript, 在當(dāng)紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這里就大概介紹一下avascript的Event用法.2009-05-05JS+Canvas實(shí)現(xiàn)上傳圖片截圖功能
在我們平時開發(fā)圖片上傳時,有時需要實(shí)現(xiàn)圖片的裁剪功能,這篇文章主要為大家介紹了如何使用Canvas實(shí)現(xiàn)上傳圖片截圖功能,希望對大家有所幫助2023-10-10