JS如何實現(xiàn)form表單登錄驗證并使用MD5加密詳解

更新時間：2023年06月10日 08:50:23 作者：Ridersong

表單驗證為終端用戶檢測無效的數(shù)據(jù)并標記這些錯誤,是一種用戶體驗的優(yōu)化,下面這篇文章主要給大家介紹了關于JS如何實現(xiàn)form表單登錄驗證并使用MD5加密的相關資料,需要的朋友可以參考下

前言

利用JS實現(xiàn)對form表單登錄提交的驗證在大多數(shù)web中都會使用到。

首先，我們要使用JavaScript的一個庫：jQuery，jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫(框架)。

這里有兩種導入方式：

1：項目內(nèi)部導入：

<script src="/web/WEB-INF/lib/jQuery/jQuery 3.6.4.js"></script>

這種方式需要你提前把jQuery下載到項目里，通過項目里的路徑來使用?？梢匀?a rel="external nofollow" target="_blank">jQuery官網(wǎng)下載，也可以點擊這里下載，后綴名里有min代表的是壓縮版，功能一樣，只是把空格，空白給刪除了。

2：項目外部導入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

這種方式可以通過CDN來使用，這種方式盡量要保持在電腦有網(wǎng)的情況下，無網(wǎng)絡的時候會連接不了。盡量用第一種方式，JQuery庫其實也不大，占不了多少內(nèi)存。

先簡單建立一個form表單。

<div>
    <form action="#" method="post" id="form" >
        <span>用戶名:</span><input type="text" id="userName" name="userName"><p id="point_1"></p><br>
        <span>密碼:</span><input type="password" id="pwd" name="pwd"><p id="point_2"></p><br>
        性別：
        <input type="radio" name="sex" id="boy" value="男"  checked="checked">男
        <input type="radio" name="sex" id="girl" value="女" >女<br><br>
        <button type="submit">提交</button>
        <p id="point_3"></p>
    </form>
</div>

我們可以通過form表單的submit事件來判斷在點擊提交后是否要對表單進行提交。可以在submit里設置一個判斷函數(shù)，符合條件就返回true，不符合就返回false(給出提示)，并且不刷新頁面(event.preventDefault() 阻止submit事件發(fā)生默認行為)。

我們要給每個輸入框設置id和name，id可以方便我們在JS里面調(diào)用該標簽的value，name的作用是：在表單向服務器提交時，提供name名字相應的值。性別使用同一個name名字是為了男，女互斥，只能提交其中一個值。p標簽用來顯示提示信息。

JS代碼如下：

     $("#userName").blur(function (){
        if($("#userName").val()===""){
            $("#userName").css({"border": "3px solid red" });
            $("#point_1").text("用戶名不能為空！！");
        }else{
            $("#userName").css({"border":"1px solid black"});
            $("#point_1").text("");
        }
        //還可以進行其他判斷
    });
    $("#pwd").blur(function (){
        if($("#pwd").val()===""){
            $("#pwd").css({"border": "3px solid red" });
            $("#point_2").text("密碼不能為空！！");
        }else{
            $("#pwd").css({"border":"1px solid black"});
            $("#point_2").text("");
        }
        //還可以進行其他判斷
    });
    $("#form").submit(function (event){
        if(($("#userName").val()!=="")&&($("#pwd").val()!=="")){
            return true;
        }else {
            $("#point_3").text("請輸入正確的信息??！").css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });

效果如下：

如果輸入都正確，那么表單就會向服務器提交信息。

提交的數(shù)據(jù)是原本的，我們可以用MD5對它進行加密處理。

首先加入MD5的JS文件：

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

修改后代碼如下：

加入了一句加密代碼，直接調(diào)用MD5對原密碼進行加密，然后再賦值給pwd。

     $("#userName").blur(function (){
        if($("#userName").val()===""){
            $("#userName").css({"border": "3px solid red" });
            $("#point_1").text("用戶名不能為空??！");
        }else{
            $("#userName").css({"border":"1px solid black"});
            $("#point_1").text("");
        }
        //還可以進行其他判斷
    });
    $("#pwd").blur(function (){
        if($("#pwd").val()===""){
            $("#pwd").css({"border": "3px solid red" });
            $("#point_2").text("密碼不能為空??！");
        }else{
            $("#pwd").css({"border":"1px solid black"});
            $("#point_2").text("");
        }
        //還可以進行其他判斷
    });
    $("#form").submit(function (event){
        if(($("#userName").val()!=="")&&($("#pwd").val()!=="")){
            $("#pwd").val(md5($("#pwd").val()));//加密代碼
            return true;
        }else {
            $("#point_3").text("請輸入正確的信息?。?).css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });

效果如下：

還有一種改進的方式：

我們將加密后的密碼會重新賦值給input框，這樣會有明顯的密碼變化，為了不讓用戶看到這一過程我們可以加入一個hide隱藏輸入框來接受加密密碼和代替顯現(xiàn)的密碼框傳送加密密碼。

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <!--一般還是把js下載到項目里，再從項目里導入-->
</head>
<body>
<div>
    <form action="#" method="post" id="form" >
        <span>用戶名:</span><input type="text" id="userName" name="userName"><p id="point_1"></p><br>
        <span>密碼:</span><input type="password" id="pwd"><p id="point_2"></p><br>
        <!--一個隱藏框-->
        <input type="hidden" id="md5password" name="pwd">
        性別：<!--name的作用是讓男，女兩個標簽互斥，只能選擇其中一個-->
        <input type="radio" name="sex" id="boy" value="男"  checked="checked">男
        <input type="radio" name="sex" id="girl" value="女" >女<br><br>
        <button type="submit">提交</button>
        <p id="point_3"></p>
    </form>
</div>
<script>
    $("#userName").blur(function (){
        if($("#userName").val()===""){
            $("#userName").css({"border": "3px solid red" });
            $("#point_1").text("用戶名不能為空！！");
        }else{
            $("#userName").css({"border":"1px solid black"});
            $("#point_1").text("");
        }
        //還可以進行其他判斷
    });
    $("#pwd").blur(function (){
        if($("#pwd").val()===""){
            $("#pwd").css({"border": "3px solid red" });
            $("#point_2").text("密碼不能為空??！");
        }else{
            $("#pwd").css({"border":"1px solid black"});
            $("#point_2").text("");
        }
        //還可以進行其他判斷
    });
    $("#form").submit(function (event){
        if(($("#userName").val()!=="")&&($("#pwd").val()!=="")){
            $("#md5password").val(md5($("#pwd").val()));//md5加密
            return true;
        }else {
            $("#point_3").text("請輸入正確的信息！！").css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });
</script>
</body>
</html>