快捷導(dǎo)航

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

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

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

前言

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

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

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

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

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

這種方式需要你提前把jQuery下載到項(xiàng)目里，通過(guò)項(xiàng)目里的路徑來(lái)使用?？梢匀?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>

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

先簡(jiǎn)單建立一個(gè)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>

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

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

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("請(qǐng)輸入正確的信息?。?).css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });

效果如下：

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

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

首先加入MD5的JS文件：

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

修改后代碼如下：

加入了一句加密代碼，直接調(diào)用MD5對(duì)原密碼進(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("請(qǐng)輸入正確的信息??！").css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });

效果如下：

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

我們將加密后的密碼會(huì)重新賦值給input框，這樣會(huì)有明顯的密碼變化，為了不讓用戶看到這一過(guò)程我們可以加入一個(gè)hide隱藏輸入框來(lái)接受加密密碼和代替顯現(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)目里，再?gòu)捻?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>
        <!--一個(gè)隱藏框-->
        <input type="hidden" id="md5password" name="pwd">
        性別：<!--name的作用是讓男，女兩個(gè)標(biāo)簽互斥，只能選擇其中一個(gè)-->
        <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("請(qǐng)輸入正確的信息！！").css({"color":"red"});
            event.preventDefault();
            return false;
        }
    });
</script>
</body>
</html>

總結(jié)

到此這篇關(guān)于JS如何實(shí)現(xiàn)form表單登錄驗(yàn)證并使用MD5加密的文章就介紹到這了,更多相關(guān)JS form表單登錄驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: