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检测客户端不是firefox则提示下载
Apr 07 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
python在windows下实现备份程序实例
2014/07/04 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Django之模板层的实现代码
2019/09/09 Python
Python猴子补丁知识点总结
2020/01/05 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python configparser模块操作代码实例
2020/06/08 Python
keras实现多种分类网络的方式
2020/06/11 Python
python如何导入依赖包
2020/07/13 Python
酒吧副总经理岗位职责
2013/12/10 职场文书
学习新党章思想汇报
2014/01/09 职场文书
计算机相关的自我评价
2014/01/15 职场文书
绩效管理实施方案
2014/03/19 职场文书
干部鉴定材料
2014/05/18 职场文书
个人安全生产承诺书
2014/05/22 职场文书
学校社会实践活动总结
2014/07/03 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
教师师德表现自我评价
2015/03/05 职场文书
教师节晚会主持词
2015/06/30 职场文书
小学六年级毕业感言
2015/07/30 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书