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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
七个很有意思的PHP函数
May 12 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 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
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
php中关于换行的实例写法
2019/09/26 PHP
css图片自适应大小
2007/11/28 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
pytest中文文档之编写断言
2019/09/12 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Keras搭建自编码器操作
2020/07/03 Python
人力资源专业推荐信
2013/11/29 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
高三政治教学反思
2014/02/06 职场文书
委托书格式
2014/08/01 职场文书
临时租车协议范本
2014/09/23 职场文书
小学教师个人总结
2015/02/05 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Python 内置函数速查表一览
2021/06/02 Python