利用JS实现对form表单登录提交的验证在大多数web中都会使用到。
首先，我们要使用JavaScript的一个库：jQuery，jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(框架)。
这里有两种导入方式：
1：项目内部导入：
<script src="/web/WEB-INF/lib/jQuery/jQuery 3.6.4.js"></script>这种方式需要你提前把jQuery下载到项目里，通过项目里的路径来使用。可以去jQuery官网下载。后缀名里有min代表的是压缩版，功能一样，只是把空格，空白给删除了。
2：项目外部导入：
<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可以方便我们在JS里面调用该标签的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;
}
});效果如下：
如果输入都正确，那么表单就会向服务器提交信息。
提交的数据是原本的，我们可以用MD5对它进行加密处理。
首先加入MD5的JS文件：
<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框，这样会有明显的密码变化，为了不让用户看到这一过程我们可以加入一个hide隐藏输入框来接受加密密码和代替显现的密码框传送加密密码。
完整代码如下：
<!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>
