7（4）用JQuery完成数据验证和表单提交

最新推荐文章于 2022-11-10 08:40:17 发布

stillbd

最新推荐文章于 2022-11-10 08:40:17 发布

阅读量1.1k

点赞数

分类专栏： 7. java Web 快速入门

本文链接：https://blog.csdn.net/stillbd/article/details/80691100

版权

7. java Web 快速入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、使用插件（项目中不建议用插件，因为jQuery一直在升级，有的插件跟不上就会过期无法用）
jquery form 插件，validation 插件
插件plugin
2、要用jQuery先在Eclipse中添加jQuery库，加到D:\JEE\Test71\WebContent目录下就可

系统报错"$" not defined 说明jQuery库没有添加

3、这次添加的是最新的jQuery库（jquery-3.3.1.js），结果运行的时候总出错，表单提交总是失败，找不到原因，后来把JQuery库换成以前老的就没事了。

4、$.trim(str) 返回：string；

说明：去掉字符串首尾空格。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<style type="text/css">
	input[type="submit"],#info
	{/*--由于div属于块元素，在table中会换行，为了不让它换行，只能讲同一行的元素上浮--*/
		float:left;
	}
	#info
	{
		margin-left:20px;
	}
</style>
<script type="text/javascript">
$(function(){
	$("form[name='f1']").submit(function(){
		if($.trim($(":text[name='uname']").val()).length==0)
		{
			$(":text[name='uname']").select();
			$(":text[name='uname']").focus();
			$("#info").html("用户名不能为空！");
			return false;
		}
		if($.trim($(":password[name='pwd']").val()).length==0)
		{
			$(":password[name='pwd']").select();
			$(":password[name='pwd']").focus();
			$("#info").html("密码不能为空！");
			return false;
		}
		var pwd=$(":password[name='pwd']").val();
		var pwd1=$(":password[name='pwd1']").val();
		if(pwd!=pwd1)
		{
			$("#info").html("两次输入的密码不一致！");
			return false;
		}
		var times=0;
		$(":checkbox[name='hobby']").each(function(index, element) {
           //if($(this).is(":checked")
		    if(element.checked)
			{
				times++;
				}
        });
		if(times==0)
		{
			$("#info").html("请至少选择一个爱好！");
			return false;
		}
		return true;
		
	});//当点击type=submit的按钮得时候会触发事件。
});
</script>
</head>
<body><!--HTML的注释方式，与上面css的注释方式不同-->
<form name="f1" id="f1" action="show.jsp">
<table>
<tr><td>用户名</td>
<td><input type="text" name="uname"></td></tr>
<tr><td>密码</td>
<td><input type="password" name="pwd"></td></tr>
<tr><td>重复密码</td>
<td><input type="password" name="pwd1"></td></tr>
<tr><td>所在省份</td>
<td>
<select name="prov">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
</select>
</td></tr>
<tr><td>兴趣爱好</td>
<td><input type="checkbox" name="hobby" value="爬山">
  爬山
  <input type="checkbox" name="hobby" value="上网">
  上网
  <input type="checkbox" name="hobby" value="看书">
  看书
  <input type="checkbox" name="hobby" value="下棋">
  下棋
  <input type="checkbox" name="hobby" value="游泳">
  游泳
  <input type="checkbox" name="hobby" value="乒乓球">
  乒乓球 </td></tr>
<tr><td colspan="2"><input type="submit" value="提交信息" ><div id="info"></div></td></tr>
</table>
</form>
</body>
</html>

stillbd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
7（4）用JQuery完成数据验证和表单提交

1、使用插件（项目中不建议用插件，因为jQuery一直在升级，有的插件跟不上就会过期无法用）jquery form 插件，validation 插件插件plugin 2、要用jQuery先在Eclipse中添加jQuery库，加到D:\JEE\Test71\WebContent目录下就可系统报错"$" not defined 说明jQuery库没有添加3、这次添加的是最新的jQuery库（jqu...
复制链接

扫一扫