JS簡單表單驗證功能完整示例

第JS簡單表單驗證功能完整示例

本文實例講述了JS簡單表單驗證功能。分享給大家供大家參考，具體如下：

簡單js表單驗證demo

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.1//EN/TR/xhtml11/DTD/xhtml11.dtd

htmlxmlns=/1999/xhtmlxml:lang=en

head

metahttp-equiv=Content-Typecontent=text/html;charset=UTF-8

titleDocument/title

script

//當用戶名獲取焦點時

functionfocus_username(){

document.getElementById(user_res).innerHTML=fontcolor=#f00請輸入用戶名/font

//當用戶名失去焦點時

functionblur_username(){

varuser_value=document.getElementsByName(username)[0].value;

if(user_value.length===0){

document.getElementById(user_res).innerHTML=fontcolor=#f00你沒有輸入用戶名/font

returnfalse;

//判斷其長度是否在5~18之間如果不在就提示用戶

}elseif(user_value.length5||user_value.length18)

document.getElementById(user_res).innerHTML=fontcolor=#f00用戶名長度必須在5-18之間/font

returnfalse;

}elseif(!checkUser(user_value)){

//用戶名還有特殊符號

document.getElementById(user_res).innerHTML=fontcolor=#f00用戶名含有特殊符號/font

returnfalse;

}else{

//用戶名合法

document.getElementById(user_res).innerHTML=fontcolor=#00f用戶名合法/font

returntrue;

//密碼獲取焦點時

functionfocus_password(){

document.getElementById(pass_res).innerHTML=fontcolor=#f00請輸入密碼/font

//密碼失去焦點時

functionblur_password(){

varuser_value=document.getElementsByName(password)[0].value;

if(user_value.length===0){

document.getElementById(pass_res).innerHTML=fontcolor=#f00你沒有輸入密碼/font

returnfalse;

//判斷其長度是否在5~18之間如果不在就提示用戶

}elseif(user_value.length5||user_value.length18)

document.getElementById(pass_res).innerHTML=fontcolor=#f00用密碼長度必須在5-18之間/font

returnfalse;

}else{

//密碼合法

document.getElementById(pass_res).innerHTML=fontcolor=#00f密碼合法/font

returntrue;

functioncheckUser(user){

vararr=[,,#,,%

vararr_length=arr.length;

varuser_length=user.length;

for(vari=0;iarr_length;i++){

for(varj=0;juser_length;j++){

if(arr[i]===user.charAt(j)){

returnfalse;

//表示用戶名合法

returntrue;

//提交提交表單驗證

functioncheckForm(){

varuser_flag=blur_username();

varpass_flag=blur_password();

if(user_flagpass_flag){

alert(提交合法表單

returntrue;

}else{

alert(輸入不合法

returnfalse;

/script

/head

body

!--action參數(shù)自定義跳轉頁面--

formname=form1onsubmit=returncheckForm()action=index.php

tablewidth=600align=center

tdalign=rightwidth=150用戶名:/td

tdwidth=100inputtype=textname=usernameonfocus=focus_username()onblur=blur_username()//td

tdspanid=user_res/span/td

/tr

tdalign=rightwidth=100密碼:/td

tdwidth=100inputtype=passwordname=passwordonfocus=focus_password()onblur=blur_password()//td

tdspanid=p