Eclipse的web项目中使用JQuery的点击事件以及表单验证失效
Eclipse的web项目中使用JQuery的点击事件以及表单验证失效
是看视频打的代码，本来运行的注册界面应该会触发密码长度不正确等提示信息，但是运行时却没有任何反映。
这是视频效果图：
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path=request.getScheme()+"://"+request.getServerName()+":"+
request.getServerPort()+request.getContextPath()+"/";
pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<title>家庭医生预约系统</title>
<meta charset="UTF-8">
<link rel="icon" href="Images/logo_favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="Css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="Css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="Css/style.css" />
<script type="text/javascript" src="Js/jquery.js"></script>
<script type="text/javascript" src="Js/jquery.sorted.js"></script>
<script type="text/javascript" src="Js/bootstrap.js"></script>
<script type="text/javascript" src="Js/ckform.js"></script>
<script type="text/javascript" src="Js/common.js"></script>
<script type="text/javascript" src="Js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="Js/jquery.validate.js"></script>
<script type="text/javascript" src="Js/messages_zh.js"></script>
<script type="text/javascript" src="Js/jquery-3.4.1.min.js"></script>
<style type="text/css">
body {
padding-top: 140px;
padding-bottom: 40px;
background-color: #f5f5f5;
font-family: "微软雅黑";
background-color: buttonhighlight;
}
.form-signin {
max-width: 600px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
background: rgba(255,255,255,0.5);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
font-size: 24px;
margin-left: 90px;
}
.form-signin .form-signin-heading{
margin-bottom: 10px;
font-size: 24px;
margin-left: 200px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
#message{
font-size: 14px;
color:red;
margin-left: 40px;
}
.input-block-level{
width: 300px;
margin-left: 40px;
}
.input-medium{
margin-left: 40px;
}
.code_images{
width: 115px;
height: 35px;
margin-top: -15px;
margin-left: 10px;
}
.error{
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" method="post" action="user">
<input type="hidden" name="method" value="regist">
<h2 class="form-signin-heading" >用户注册</h2>
姓 名：
<input type="text" name="name" class="input-block-level" placeholder="账号">
<br/>
密 码：
<input id="password" type="password" name="password" class="input-block-level" placeholder="密码">
<br/>
确认密码：<input type="password" name="password2" class="input-block-level" placeholder="确认密码">
<br/>
用 户 名：<input type="text" id="username" name="username" class="input-block-level" placeholder="用户名">
<span id="username_msg"></span><br/>
性 别：
<input type="radio" id="sex" name="sex" value="male" >男
<input type="radio" id="sex" name="sex" value="female">女<br/>
身份证号：<input type="text" id="identity" name="identity" class="input-block-level" placeholder="身份证号">
<span id="identity_msg"></span><br/>
电话号码：<input type="text" id="phone" name="phone" class="input-block-level" placeholder="电话号码">
<span id="phone_msg"></span><br/>
<p style="text-align: center;">
<input id="login" type="button" value="注册" name="login1" class="btn btn-large btn-info" style="width: 100px;"/>
<input id="reset" type="reset" value="清空" name="login2" class="btn btn-large btn-info" style="width: 100px;"/>
</p>
</form>
</div>
<script type="text/javascript" >
$("#login").click(function(){
$("form").submit();
});
$("form").validate({
rules:{
"name":{
"required":true
},
"password":{
"required":true,
"rangelength":[3,10]
},
"password2":{
"required":true,
"rangelength":[3,10],
"equalTo":"#password"
}
},
messages:{
"name":{
"required":"用户名不能为空"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度必须在3-10之间"
},
"password2":{
"required":"确认密码不能为空",
"rangelength":"密码长度必须在3-10之间",
"equalTo":"两次密码不一致"
}
},
errorElement:"error"
},
})
$("#username").blur(function(){
alert(1);
})
</script>
</body>
</html>
用谷歌浏览器打开按f12看一下有没有报错
【相关推荐】
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/226113
- 你也可以参考下这篇文章：web项目导入的js或jQuery文件路径正确但是无法生效问题
- 除此之外, 这篇博客: Web前端学习笔记15：Web前端开发：jQuery总结中的 1.3.5 案例：购物车案例模块-选中商品添加背景 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
1.核心思路：选中的商品添加背景，不选中移除背景即可
2.全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
3.小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景
4.这个背景，可以通过类名修改，添加类和删除类 代码实现略。(详情参考源代码)
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^