javascript验证form表单数据的案例详解


Posted in Javascript onMarch 25, 2019

直接po截图和代码

javascript验证form表单数据的案例详解

javascript验证form表单数据的案例详解

下面是CheckFormDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证表单的案例</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" />
<script type="text/javascript" src="jsCheckDateDemo.js"></script>
</head>
<body>
<h1>验证表单的案例</h1>
<form name="form1" id="f1" action="../TestForm" method="get">
姓名:<input type="text" name="userName" id="uName">
<br/>
年龄:<input type="text" name="age" id="uAge">
<br/>
密码:<input type="password" name="pwd" id="myPwd">
<br/>
重复密码:<input type="password" name="repeatPwd" id="myRepeatPwd">
<br/>
<!-- 
虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只
有选中了的复选框,才会提交到服务器端
 -->
爱好:<input type="checkbox" name="hobby" id="myHobby" value="football">足球
<input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" id="myHobby" value="basketball">篮球
<input type="checkbox" name="hobby" id="myHobby" value="billiards">台球
<br/>
备注:<textarea rows="3" cols="30" id="remarks"></textarea>
<br/>
<!-- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 -->
测试字段:<input type="text" id="test" value="本文本框故意不设置name属性,看服务器端能不能接收到">
<br/>
<!-- 
onclick="checkForm();"这句话中的;分号也可以省略不写,但是如果有多行js代
码的话,那就要在每行js代码后面加上;分号,最后一行js代码后面可以不写;分号,也可以写上;分号
 -->
<input type="button" value="js验证表单" onclick="checkForm();">
<input type="submit" value="提交到servlet">
</form>
</body>
</html>

下面是jsCheckDateDemo.js

/**
 * 
 */
 
//验证表单数据
function checkForm(){
//	alert(document.form1.hobby.length);
//	alert(document.getElementsByName("hobby").length);
//	alert(document.getElementsByName("hobby")[0].value);
//	alert(document.getElementById("myHobby"));
	
//	for (var i = 0; i < document.forms[0].hobby.length; i++) {
//		alert("---" + document.forms[0].hobby[i].value);
//	}
	
	var flag = false;
	for (var i = 0; i < document.form1.hobby.length; i++) {
//		alert(document.form1.hobby[i].value);
//		alert(document.form1.hobby[i].checked);
		if (document.form1.hobby[i].checked) {
			flag = true;
			break;
		}
	}
	if (!flag) {//没有一个爱好被选中
		alert("请至少选择一个爱好!");
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value.length < 8) {
		alert("密码长度不能小于8位!");
		document.forms[0].pwd.focus();//让密码框获取焦点
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
		alert("两次密码输入不一致!");
		document.forms[0].repeatPwd.focus();//让重复密码框获取焦点
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.getElementById("remarks").value == "") {
		alert("备注不能为空!");
		/*
这里可以不写return,因为程序执行到这里时,后面已经没有任何代码了,所
以写不写return都无所谓,所以就不要写return了,写了反而让人觉得你是个新手,水平有点菜!
		*/
	}
}
 

以上所述是小编给大家介绍的javascript验证form表单数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
基于javascript编写简单日历
May 02 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
微信小程序云开发详细教程
May 16 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
Node.js之readline模块的使用详解
Mar 25 #Javascript
Javascript的this详解
Mar 23 #Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 #Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
You might like
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP中phar包的使用教程
2017/06/14 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
如何基于jQuery实现五角星评分
2020/09/02 jQuery
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python单例模式实例分析
2015/01/14 Python
python文件操作相关知识点总结整理
2016/02/22 Python
深入了解Python数据类型之列表
2016/06/24 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python用字典构建多级菜单功能
2019/07/11 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
scrapy头部修改的方法详解
2020/12/06 Python
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis