JS 实现form表单登录验证并使用MD5加密

利用JS实现对form表单登录提交的验证在大多数web中都会使用到。

首先，我们要使用JavaScript的一个库：jQuery，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(框架)。

这里有两种导入方式：

1：项目内部导入：

html 复制代码

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

这种方式需要你提前把jQuery下载到项目里，通过项目里的路径来使用。可以去jQuery官网下载。后缀名里有min代表的是压缩版，功能一样，只是把空格，空白给删除了。

2：项目外部导入：

html 复制代码

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

这种方式可以通过CDN来使用，这种方式尽量要保持在电脑有网的情况下，无网络的时候会连接不了。尽量用第一种方式，JQuery库其实也不大，占不了多少内存。

先简单建立一个form表单。

html 复制代码

<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里设置一个判断函数，符合条件就返回true，不符合就返回false(给出提示)，并且不刷新页面(event.preventDefault() 阻止submit事件发生默认行为)。

我们要给每个输入框设置id和name，id可以方便我们在JS里面调用 该标签的value，name的作用是：在表单向服务器提交时，提供name名字相应的值。性别使用同一个name名字是为了男，女互斥，只能提交其中一个值。p标签用来显示提示信息。

JS代码如下：

javascript 复制代码

     $("#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;
        }
    });

效果如下：

如果输入都正确，那么表单就会向服务器提交信息。

提交的数据是原本的，我们可以用MD5对它进行加密处理。

首先加入MD5的JS文件：

html 复制代码

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

修改后代码如下：

加入了一句加密代码，直接调用MD5对原密码进行加密，然后再赋值给pwd。

javascript 复制代码

     $("#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隐藏输入框来接受加密密码 和代替显现的密码框传送加密密码。

完整代码如下：

html 复制代码

<!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>