javascript验证form表单数据的案例详解
时间:2019-03-25
这篇文章主要介绍了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表单数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Java中的宏变量,宏替换详解。
- 类、变量、块、构造器、继承初始化顺序,终极解答。
- Spring Boot Debug调试
- Maven精选系列--classifier元素妙用
- PostgreSQL里面的一些命令小结
- Java中创建String的两道面试题及详解
- PostgreSQL主备环境搭建
- Tomcat集群session复制与Oracle的坑。。
- 用Keras+TensorFlow,实现ImageNet数据集日常对象的识别
- JavaWeb项目架构之Elasticsearch日志处理系统
- 分布式服务防雪崩熔断器,Hystrix理论+实战。
- JavaWeb项目架构之Kafka分布式日志队列
- 如何让Git记住用户名和密码
- 金融系统中正确的金额计算及存储方式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux进程之如何查看进程详情?
- 浙大版《C语言程序设计(第3版)》题目集 习题5-5 使用函数统计指定数字的个数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-6 使用函数输出水仙花数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-7 使用函数求余弦函数的近似值
- 浙大版《C语言程序设计(第3版)》题目集 习题6-1 分类统计字符个数
- 微信群总是有人发广告?看我用Python写一个自动化机器人消灭他!
- 浙大版《C语言程序设计(第3版)》题目集 习题6-2 使用函数求特殊a串数列和
- 浙大版《C语言程序设计(第3版)》题目集 习题6-4 使用函数输出指定范围内的Fibonacci数
- 浙大版《C语言程序设计(第3版)》题目集 习题6-5 使用函数验证哥德巴赫猜想
- Linux Used内存到底哪里去了?
- 浙大版《C语言程序设计(第3版)》题目集 习题6-6 使用函数输出一个整数的逆序数
- 浙大版《C语言程序设计(第3版)》题目集 练习8-2 计算两数的和与差
- SQL查找是否"存在",别再count了!
- 浙大版《C语言程序设计(第3版)》题目集 练习8-8 移动字母
- 超赞!墙裂推荐这款开源、轻量无 Agent 自动化运维平台