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 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
JavaScript仿京东秒杀倒计时
Mar 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现文件下载详解
2014/11/27 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
php session_decode函数用法讲解
2019/05/26 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
基于python实现坦克大战游戏
2020/10/27 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
2014年单位植树节活动方案
2014/03/23 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
匿名信格式范文
2015/05/27 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript