快捷導(dǎo)航

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

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

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

前言

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

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

這里有兩種導(dǎo)入方式：

1：項(xiàng)目內(nèi)部導(dǎo)入：

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

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

2：項(xiàng)目外部導(dǎo)入：

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

這種方式可以通過CDN來使用，這種方式盡量要保持在電腦有網(wǎng)的情況下，無網(wǎng)絡(luò)的時(shí)候會連接不了。盡量用第一種方式，JQuery庫其實(shí)也不大，占不了多少內(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事件來判斷在點(diǎn)擊提交后是否要對表單進(jìn)行提交。可以在submit里設(shè)置一個判斷函數(shù)，符合條件就返回true，不符合就返回false(給出提示)，并且不刷新頁面(event.preventDefault() 阻止submit事件發(fā)生默認(rèn)行為)。

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

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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#form").submit(function (event){
        if(($("#userName").val()!=="")&&($("#pwd").val()!=="")){
            return true;
        }else {
            $("#point_3").text("請輸入正確的信息！！").css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });

效果如下：

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

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

首先加入MD5的JS文件：

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

修改后代碼如下：

加入了一句加密代碼，直接調(diào)用MD5對原密碼進(jìn)行加密，然后再賦值給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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#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;
        }
    });

效果如下：

還有一種改進(jìn)的方式：

我們將加密后的密碼會重新賦值給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下載到項(xiàng)目里，再從項(xiàng)目里導(dǎo)入-->
</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的作用是讓男，女兩個標(biāo)簽互斥，只能選擇其中一個-->
        <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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#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("");
        }
        //還可以進(jìn)行其他判斷
    });
    $("#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>