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 相关文章推荐
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Javascript获取某个月的天数
May 30 Javascript
npm 常用命令详解(小结)
Jan 17 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作的文本留言本的例子(五)
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Python中对象的引用与复制代码示例
2017/12/04 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
办公室人员先进事迹
2014/01/27 职场文书
交通事故协议书
2014/04/15 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
优秀班组申报材料
2014/12/25 职场文书
学校施工安全责任书
2015/01/29 职场文书
员工表扬信怎么写
2015/05/05 职场文书