Javascript實(shí)現(xiàn)表單檢驗(yàn)

更新時(shí)間：2022年06月16日 15:42:34 作者：lihuiGG520

這篇文章主要介紹了Javascript實(shí)現(xiàn)表單檢驗(yàn)，以注冊(cè)界面為例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

正如我們所見(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）的作用類(lèi)似于C語(yǔ)言中的define,將所使用的功能或語(yǔ)句定義為一個(gè)符號(hào)或字符串，極大程度的簡(jiǎn)化代碼，你也可以不使用該方法，用document.getElementById()還原（id）的作用類(lèi)似于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)行代碼如圖：