位置：首页>> 网络编程>> JavaScript>> javascript验证form表单数据的案例详解

javascript验证form表单数据的案例详解

作者：lay500　　发布时间：2024-04-10 10:39:05　

标签：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/>

爱好：<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/>

测试字段:<input type="text" id="test" value="本文本框故意不设置name属性，看服务器端能不能接收到">
<br/>

<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表单数据详解整合网站的支持！

来源：https://blog.csdn.net/czh500/article/details/88581635

投稿

javascript验证form表单数据的案例详解

猜你喜欢