JS對註冊頁面進行表單校驗

2022-05-22 13:15:12 字數 2162 閱讀 6568

校驗效果:

< html lang="en">新使用者註冊

user register

已有賬號?立即登入

* 

body

.reg_back

.reg_left

.reg_left > p:first-child

.reg_left > p:last-child

.reg_center

.reg_right

.reg_right > p:first-child

.reg_right p a

.td_left

.td_right

#username ,#password,#email, #rename ,#telphone,#birthday,#checkcode

#checkcode

#img_check

#btn_sub

.error

#td_sub

window.onload = function () 

//給使用者名稱和密碼框、email、姓名、手機號分別繫結離焦事件

document.getelementbyid("username").onblur = checkusername;

document.getelementbyid("password").onblur = checkpassword;

document.getelementbyid("email").onblur = checkemail;

document.getelementbyid("rename").onblur = checkrename;

document.getelementbyid("telphone").onblur = checktelphone;

}//校驗使用者名稱

function checkusername() else

return flag;

}//校驗密碼

function checkpassword()$/;

//3.判斷值是否符合正則的規則

var flag = reg_password.test(password);

//4.提示資訊

var s_password = document.getelementbyid("s_password");

if(flag)else

return flag;

}//校驗email

function checkemail()else

return flag;

}//校驗真實姓名

function checkrename()$/;

//3.判斷值是否符合正則的規則

var flag = reg_rename.test(rename);

//4.提示資訊

var s_rename = document.getelementbyid("s_rename");

if(flag)else

return flag;

}//校驗手機號

function checktelphone())|(15[0-9])|(18[0-9]))+\d)$/;

//3.判斷值是否符合正則的規則

var flag = reg_telphone.test(telphone);

//4.提示資訊

var s_telphone = document.getelementbyid("s_telphone");

if(flag)else

return flag;

}

背景

驗證碼

表單的校驗 註冊頁面的設計

總結根據一些方法使使用者提交的資料符合我們的一些規範。如果符合規範就可以提交資料,不符合便不可以提交。1.在輸入框後面使用span標籤,顯示提示資訊 2.使用標籤的innerhtml屬性控制提示資訊的顯示 3.使用事件繫結方法進行校驗,常用 onkeyup和onsubmit事件控制 4.書寫要校驗的...

使用JQ完成註冊頁面(表單)的校驗

1.步驟 1.0 在頁面載入時,執行3部分操作 1.1 第1部分 必填項 1.1.1 給form表單中所有的帶 required 類名的input標籤中,新增乙個紅色的 表示必填項.1.2 第2部分 獲取焦點 失去焦點的校驗 1.2.1 獲得所有的輸入項,為輸入項新增乙個blur事件.1.2.2 獲...

JS 製作註冊頁面

使用js製作註冊頁面,使用正規表示式驗證該資料是否符合要求 css頁面 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd ulinput clear after box box h2 box form box form ul li box form ul li input b...