本文详细介绍如何利用JavaScript和jQuery库实现Form表单的登录验证，并通过MD5算法对密码进行前端加密处理。内容涵盖jQuery的本地与CDN导入方式、表单提交事件的拦截与校验逻辑，以及使用MD5库加密密码并优化用户体验的两种实现方案，帮助开发者提升Web应用的基础安全性。
前言
在前端开发中，利用JavaScript对Form表单的登录提交进行验证是常见的功能需求。
实现这一功能通常需要借助jQuery库，这是一个快速且简洁的JavaScript框架，也是继Prototype之后备受推崇的代码库之一。
引入jQuery主要有两种途径：
第一种是本地导入。
<script src="/web/WEB-INF/lib/jQuery/jQuery 3.6.4.js"></script>这种方式要求开发者预先将jQuery文件下载并存放于项目目录中，通过相对路径引用。可以从jQuery官网获取，也可通过指定链接下载。文件名后缀带有“min”表示这是压缩版，功能与完整版一致，仅去除了空格和空白字符以减小体积。
第二种是外部CDN导入。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>通过内容分发网络（CDN）引入库文件，这种方式依赖网络连接，断网状态下无法加载。鉴于jQuery库体积较小，建议优先采用本地导入方式，以避免网络依赖带来的潜在问题。
接下来，构建一个基础的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处理函数中设置判断逻辑：若验证通过则返回true，否则返回false并给出提示。同时，调用event.preventDefault()阻止submit事件的默认提交行为，从而避免页面刷新。
为每个输入框设置id和name属性至关重要。id便于在JavaScript中通过DOM操作获取标签的value值；name属性则在表单向服务器提交时，作为键值对中的键名。对于性别选项，男女单选框使用相同的name属性以实现互斥选择，即只能提交其中一个值。此外，使用p标签用于显示具体的提示信息。
对应的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加密的JavaScript文件：
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>修改后的代码示例如下：
在原有验证逻辑基础上，增加一行调用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框，但这会导致用户看到密码字符的变化。为了提升用户体验，可以引入一个隐藏的input框来接收加密后的密码，并替代可见密码框向服务器发送加密数据。
完整的优化代码如下：
<!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>总结
至此，关于如何使用JS实现Form表单登录验证并结合MD5加密的文章介绍完毕。如需了解更多相关技术，可查阅本站历史文章或继续浏览后续内容，感谢大家的支持！