javascript验证form表单数据的案例详解
作者：lay500 时间：2024-04-10 10:39:05
直接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表单数据详解整合网站的支持！
来源：https://blog.csdn.net/czh500/article/details/88581635
标签：JavaScript,form,表单验证
0
投稿猜你喜欢
用python写扫雷游戏实例代码分享
2023-03-31 05:12:38
Python中的Nonetype类型怎么判断
2021-06-19 17:33:13
如何使用 Flask 做一个评论系统
2023-12-08 21:04:48
基于Python实现拉格朗日插值法
2022-03-18 18:52:18
Django原生sql也能使用Paginator分页的示例代码
2023-11-09 10:00:06
scrapy-splash简单使用详解
2023-06-02 15:22:37
Appium+python自动化之连接模拟器并启动淘宝APP（超详解）
2021-03-08 01:07:41
matlab xlabel位置的设置方式
2022-06-11 06:51:24
php处理抢购类功能的高并发请求
2023-11-21 01:30:54
SQL里面用自定义Split()完成个性化需求
2024-01-15 08:07:58
python爬虫正则表达式之处理换行符
2021-02-20 05:56:02
在pyqt5中展示pyecharts生成的图像问题
2023-10-17 10:59:46
Goland项目使用gomod配置的详细步骤
2024-04-26 17:35:34
MySQL在Linux系统中隐藏命令行中的密码的方法
2024-01-20 03:38:34
Python+AutoIt实现界面工具开发过程详解
2023-06-17 20:39:47
python私有属性和方法实例分析
2023-11-21 06:16:13
python matplotlib实现条形图的填充效果
2022-03-12 07:55:20
Mac下PyCharm快捷键分享
2023-05-31 07:54:38
js将URL网址转为16进制加密与解密函数
2024-02-26 13:37:30
js/jq仿window文件夹框选操作插件
2024-04-16 09:50:23
