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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
用javascript连接access数据库的方法
Nov 17 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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操作符与控制结构代码
2011/12/30 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
js实现自定义路由
2017/02/04 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python 字符串与数字输出方法
2018/07/16 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
促销活动总结
2014/04/28 职场文书
初中新生军训方案
2014/05/13 职场文书
物理课外活动总结
2014/08/27 职场文书
公务员检讨书
2014/11/01 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Python内置数据类型中的集合详解
2022/03/18 Python