本文實(shí)例講述了JS簡(jiǎn)單表單驗(yàn)證功能。分享給大家供大家參考，具體如下：
簡(jiǎ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)時(shí) function focus_username(){ document.getElementById("user_res").innerHTML="<font color='#f00'>請(qǐng)輸入用戶名</font>"; } //當(dāng)用戶名失去焦點(diǎn)時(shí) function blur_username(){ var user_value=document.getElementsByName("username")[0].value; if(user_value.length===0){ document.getElementById("user_res").innerHTML="<font color='#f00'>你沒(méi)有輸入用戶名</font>"; return false; //判斷其長(zhǎng)度是否在5~18之間 如果不在就提示用戶 }else if(user_value.length<5||user_value.length>18) { document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名長(zhǎng)度必須在5-18之間</font>"; return false; }else if(!checkUser(user_value)){ //用戶名還有特殊符號(hào) document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名含有特殊符號(hào)</font>"; return false; }else{ //用戶名合法 document.getElementById("user_res").innerHTML="<font color='#00f'>用戶名合法</font>"; return true; } } //密碼獲取焦點(diǎn)時(shí) function focus_password(){ document.getElementById("pass_res").innerHTML="<font color='#f00'>請(qǐng)輸入密碼</font>"; } //密碼失去焦點(diǎn)時(shí) function blur_password(){ var user_value=document.getElementsByName("password")[0].value; if(user_value.length===0){ document.getElementById("pass_res").innerHTML="<font color='#f00'>你沒(méi)有輸入密碼</font>"; return false; //判斷其長(zhǎng)度是否在5~18之間 如果不在就提示用戶 }else if(user_value.length<5||user_value.length>18) { document.getElementById("pass_res").innerHTML="<font color='#f00'>用密碼長(zhǎng)度必須在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)頁(yè)面--> <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>
新聞熱點(diǎn)
疑難解答
圖片精選
