javascript验证form表单数据的案例详解
更新时间：2019年03月25日 14:08:13 作者：lay500
这篇文章主要介绍了javascript验证form表单数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
直接po截图和代码
下面是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表单数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了HTML，CSS，JavaScript速查表，推荐给大家,需要的朋友可以参考下2014-12-12
日常生活中，各种形式的时间字符到处都是。时间观念的产生，时间单位、计时工具的发明，给人类带来的变化实在一言难尽。今天就来谈谈日期那些事儿。一起来看看 JavaScript 中的日期对象 Date。2017-10-10
在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法，很简单的一个方法，以前一直不以为意，直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候，并不是十分理解，了解了一下replace的用法才明白，原来replace不像想象中的那么简单2013-04-04
本篇文章，小编将为大家介绍，JS中 用户登录系统的解决办法，有需要的朋友可以参考一下2013-04-04
深入理解JavaScript系列（38）：设计模式之职责链模式详解
这篇文章主要介绍了深入理解JavaScript系列（38）：设计模式之职责链模式详解,职责链模式（Chain of responsibility）是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript语言的基本语法要求要学习好JavaScript，首先我们要懂JavaScript语言的一些基本语法要求，感兴趣的小伙伴们可以参考一下2015-11-11
库是一个饱受争议的热门话题。一种观点认为它是一种非常棒的工具，是任何开发者都不可或缺的；另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖，会助长懒惰的风气从而导致开发者素质下降2013-01-01
这篇文章主要介绍了Python脚本后台运行的几种方式,linux下后台运行、通过upstart方式实现、通过bash脚本实现、通过screen、tmux等方式实现,需要的朋友可以参考下2015-03-03
JavaScript sub方法入门实例（把字符串显示为下标）
这篇文章主要介绍了JavaScript sub方法入门实例,sub方法用于把字符串显示为下标,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了js检测浏览器夜晚（dark）模式方法,需要的朋友可以参考下2022-10-10
最新评论