Javascript實(shí)現(xiàn)表單檢驗(yàn)
正如我們所見(jiàn)到的,好多網(wǎng)頁(yè)都有注冊(cè)界面,在注冊(cè)界面中,最常見(jiàn)的即是包括用戶名、密碼、請(qǐng)重復(fù)輸入密碼和一個(gè)“注冊(cè)”按鈕,今天我們就舉例實(shí)現(xiàn)一下該界面。
要求:
1.用戶名不為空,且用戶名不能超過(guò)12個(gè)字符;
2.密碼不為空,且密碼不能超過(guò)15個(gè)字符;
3.密碼和重復(fù)輸入的密碼必須一致;
4.如果發(fā)生錯(cuò)誤,顯示錯(cuò)誤并聚焦到錯(cuò)誤位置;
<!DOCTYPE html> <html> ? ? <head> ? ? ? ? <meta charset="UTF-8"> ? ? ? ? <title>注冊(cè)</title> ? ? ? ? <script> ? ? ? ? ? ? function $(id){ ? ? ? ? ? ? ? ? return document.getElementById(id); ? ? ? ? ? ? } ? ? ? ? ? ? function test(){ ? ? ? ? ? ? ? ? var user_name = $("user_name").value; ? ? ? ? ? ? ? ? var password = $("password").value; ? ? ? ? ? ? ? ? var re_password = $("re_password").value; ? ? ? ? ? ? ? ? if(user_name.length==0){ ? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "用戶名不能為空!"; ? ? ? ? ? ? ? ? ? ? $("user_name").focus(); ? ? ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if(user_name.length>12){ ? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "用戶名不能超過(guò)12個(gè)字符!"; ? ? ? ? ? ? ? ? ? ? $("user_name").focus(); ? ? ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if(password.length==0){ ? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能為空!"; ? ? ? ? ? ? ? ? ? ? $("password").focus(); ? ? ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if(password.length>15){ ? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能超過(guò)15個(gè)字符!"; ? ? ? ? ? ? ? ? ? ? $("password").focus(); ? ? ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if(password!=re_password ){ ? ? ? ? ? ? ? ? ? ? $("msg").innerHTML="錯(cuò)誤!密碼不一致!"; ? ? ? ? ? ? ? ? ? ? $("re_password").focus(); ? ? ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? console.log("注冊(cè)成功!"); ? ? ? ? ? ? ? ? return true; ? ? ? ? ? ? } ? ? ? ? </script> ? ? </head> ? ? <body> ? ? ? ? <br /> ? ? ? ? <span id="msg" style="color: red;"></span> ? ? ? ? <form onsubmit="return test()"> ? ? ? ? ? ? <input placeholder="請(qǐng)輸入用戶名" id="user_name" /><br /> ? ? ? ? ? ? <input placeholder="請(qǐng)輸入密碼" type="password" id="password"/><br /> ? ? ? ? ? ? <input placeholder="請(qǐng)?jiān)俅屋斎朊艽a" type="password" id="re_password"/><br /> ? ? ? ? ? ? <input type="submit" ?value="注冊(cè)" /> ? ? ? ? </form> ? ? </body> </html>
注:方法不唯一,此方法僅作參考。
下面對(duì)該代碼中的一些點(diǎn)進(jìn)行講解:
1. (id)的作用類似于C語(yǔ)言中的define,將所使用的功能或語(yǔ)句定義為一個(gè)符號(hào)或字符串,極大程度的簡(jiǎn)化代碼,你也可以不使用該方法,用document.getElementById()還原(id)的作用類似于C語(yǔ)言中的define,將所使用的功能或語(yǔ)句定義為一個(gè)符號(hào)或字符串,極大程度的簡(jiǎn)化代碼,你也可以不使用該方法,用document.getElementById()還原();
2. 定義的對(duì)象必須加.value使其為獲取的輸入的值,而下面聚焦時(shí),需要改用focus;
3. 在每個(gè)if語(yǔ)句中,最好再加一個(gè)返回值,提高代碼的運(yùn)行效果,innerHTML的作用是在瀏覽器頁(yè)面中顯示;
4. 在整個(gè)函數(shù)test()的最后,若return false,則為取消提交,若return true,則為正常提交;
大家可以自己嘗試一下,部分頁(yè)面如下:
直接運(yùn)行代碼如圖:
不輸入任何值,直接點(diǎn)擊注冊(cè),效果如圖:
全部按要求輸入后,會(huì)返回最初的樣子,是因?yàn)闆](méi)有指定成功輸入后跳轉(zhuǎn)的界面,自己設(shè)置即可。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
為了達(dá)到某種特殊的效果我們需要用Javascript動(dòng)態(tài)的去更改某一個(gè)標(biāo)簽的Css屬性,如何動(dòng)態(tài)修改css樣式呢?面對(duì)這個(gè)問(wèn)題,小編帶領(lǐng)大家來(lái)解決javascript動(dòng)態(tài)修改css樣式,小伙伴們都快來(lái)學(xué)習(xí)吧2015-08-08詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò)
這篇文章主要介紹了詳解webpack的clean-webpack-plugin插件報(bào)錯(cuò),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表
下面是完成后的預(yù)覽圖,可以看到,繪制一個(gè)表格,耗時(shí)0.005毫秒,也就是200分之一秒。效率我還是比較滿意的!2010-07-07js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如:15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號(hào)分隔(如:15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06javascript實(shí)現(xiàn)文本域?qū)懭胱址麜r(shí)限定字?jǐn)?shù)
這篇文章主要介紹了javascript實(shí)現(xiàn)文本域的寫入字符個(gè)數(shù)限定字?jǐn)?shù),需要的朋友可以參考下2014-02-02利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南
這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開(kāi)發(fā)指南,兼容uniapp版本,需要的朋友可以參考下2023-12-12JavaScript中使用Async實(shí)現(xiàn)異步控制
async提供了很多函數(shù)用于異步流程控制,下面是async核心的幾個(gè)函數(shù),大家通過(guò)本文學(xué)習(xí)下,對(duì)使用async 實(shí)現(xiàn)異步控制相關(guān)知識(shí),感興趣的朋友一起看看吧2017-08-08