javascript中怎么验证form表单数据
短信预约 -IT技能 免费直播动态提醒
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" class="lazy" data-src="jsCheckDateDemo.js"></script>
</head>
<body>
<h2>验证表单的案例</h2>
<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("备注不能为空!");
}
}看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
