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

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

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

正如我們所見到的，好多網(wǎng)頁都有注冊界面，在注冊界面中，最常見的即是包括用戶名、密碼、請重復輸入密碼和一個“注冊”按鈕，今天我們就舉例實現(xiàn)一下該界面。

要求：

1.用戶名不為空，且用戶名不能超過12個字符；
2.密碼不為空，且密碼不能超過15個字符；
3.密碼和重復輸入的密碼必須一致；
4.如果發(fā)生錯誤，顯示錯誤并聚焦到錯誤位置；

<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>注冊</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 = "用戶名不能超過12個字符！";
? ? ? ? ? ? ? ? ? ? $("user_name").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(password.length==0){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能為空！";
? ? ? ? ? ? ? ? ? ? $("password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(password.length>15){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能超過15個字符！";
? ? ? ? ? ? ? ? ? ? $("password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(password!=re_password ){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML="錯誤！密碼不一致！";
? ? ? ? ? ? ? ? ? ? $("re_password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? console.log("注冊成功！");
? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <br />
? ? ? ? <span id="msg" style="color: red;"></span>
? ? ? ? <form onsubmit="return test()">
? ? ? ? ? ? <input placeholder="請輸入用戶名" id="user_name" /><br />
? ? ? ? ? ? <input placeholder="請輸入密碼" type="password" id="password"/><br />
? ? ? ? ? ? <input placeholder="請再次輸入密碼" type="password" id="re_password"/><br />
? ? ? ? ? ? <input type="submit" ?value="注冊" />
? ? ? ? </form>
? ? </body>
</html>

注：方法不唯一，此方法僅作參考。

下面對該代碼中的一些點進行講解：

1. （id）的作用類似于C語言中的define,將所使用的功能或語句定義為一個符號或字符串，極大程度的簡化代碼，你也可以不使用該方法，用document.getElementById()還原（id）的作用類似于C語言中的define,將所使用的功能或語句定義為一個符號或字符串，極大程度的簡化代碼，你也可以不使用該方法，用document.getElementById()還原()；
2. 定義的對象必須加.value使其為獲取的輸入的值，而下面聚焦時，需要改用focus；
3. 在每個if語句中，最好再加一個返回值，提高代碼的運行效果，innerHTML的作用是在瀏覽器頁面中顯示；
4. 在整個函數(shù)test()的最后，若return false，則為取消提交，若return true，則為正常提交；

大家可以自己嘗試一下，部分頁面如下：
直接運行代碼如圖：