JavaScriptDay2-简单网页表单验证
Html部分
<!--
注册表单
1-用户名 text
2-密码 password
3-确认密码 password
4-性别 radio
5-爱好 hobby
6-籍贯 select-option
7-留言 textarea
8-提交 重置 submit reset
-->
<body>
<form action="" method="post" onsubmit="return formCheck()">
<p>
<label for="username">用户名</label>
</p>
<p>
<input type="text" id="username" onblur="unameCheck()" placeholder="请输入用户名"/>
<label id="unaemelabel"></label>
</p>
<p>
<label for="pwd">密码</label>
</p>
<p>
<input type="password" id="pwd" onblur="pwdCheck()"/>
<label for="" id="ulabelpwd"></label>
</p>
<p>
<label for="repwd">确认密码</label>
</p>
<p>
<input type="password" id="repwd" onblur="repwdCheck()"/>
<label for="" id="labelrepwd"></label>
</p>
<p>
<label for="">性别</label>
</p>
<p onmouseover="genderCheck()">
<input type="radio" name="gender" id="g1"/>男
<!--获取焦点-->
<label for="g1"></label>
<input type="radio" name="gender" id="g2"/>女
<label for="g2" id="genderlabel"></label>
</p>
<p>
<label>爱好</label>
</p>
<p onmouseover="hobbyCheck()">
<input type="checkbox" name="hobby" id="chi" value="吃"/>吃
<input type="checkbox" name="hobby" id="he" value="喝"/>喝
<input type="checkbox" name="hobby" id="wan" value="玩"/>玩
<label for="" id="hobbylabel"></label>
</p>
<p>籍贯</p>
<p>
<select name="" id="jiguan" onblur="jiguanCheck()">
<option value="">--请选择--</option>
<option value="jia">家</option>
<option value="xue">学</option>
<option value="fan">饭</option>
</select>
<label for="" id="jiguanlabel"></label>
</p>
<p>留言</p>
<p>
<textarea name="" id="liuyan" cols="30" rows="10" onblur="textheck()"></textarea>
<label for="" id="textlabel"></label>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p> </form>
</body>
Css部分
<script>
//用户名验证
function unameCheck(){
//1-获取
var uname = document.getElementById("username").value;
var ulabel = document.getElementById("unaemelabel");
//2-不能为空
if(uname == null || uname == ""){
//给出提示信息
ulabel.innerHTML="对不起";
ulabel.style.color="red";
return false;
}else{
ulabel.innerHTML="<span class='fa fa-heart'></span>";
ulabel.style.color="green";
return true;
}
}
//密码验证
function pwdCheck(){
//1-获取
var upwd = document.getElementById("pwd").value;
var ulabel = document.getElementById("ulabelpwd");
//2-不能为空
if(upwd == null || upwd == ""){
//给出提示信息
ulabel.innerHTML="对不起";
ulabel.style.color="red";
return false;
}else{
ulabel.innerHTML="<span class='fa fa-heart'></span>";
ulabel.style.color="green";
return true;
}
}
//确认密码验证
function repwdCheck(){
//1-获取
var upwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
var labelrepwd = document.getElementById("labelrepwd");
//2-不能为空
if(repwd == null || repwd == ""){
//给出提示信息
labelrepwd.innerHTML="对不起";
labelrepwd.style.color="red";
return false;
}else if(upwd!=repwd){
labelrepwd.innerHTML="不一致";
labelrepwd.style.color="red";
}
else{
labelrepwd.innerHTML="<span class='fa fa-heart'></span>";
labelrepwd.style.color="green";
return true;
}
}
//性别验证
function genderCheck(){
//1-获取 根据全部radio document.getElementsByName
var gendername = document.getElementsByName("gender");
var genderlabel = document.getElementById("genderlabel");
//判断
var rs = false;
for(var i=0; i < gendername.length; i++){
if(gendername[i].checked){
rs = true;
break;
}
}
if(rs){
genderlabel.innerHTML="<span class='fa fa-heart'></span>";
genderlabel.style.color="green";
return true;
}else{
genderlabel.innerHTML="请选择性别";
genderlabel.style.color="red";
}
}
//爱好验证
function hobbyCheck(){
//1-获取 根据全部hobby document.getElementsByName
var hobbyname = document.getElementsByName("hobby");
var hobbylabel = document.getElementById("hobbylabel");
//判断
var count = 0;
for(var i=0; i < hobbyname.length; i++){
if(hobbyname[i].checked){
count++;
}
}
if(count >= 2){
hobbylabel.innerHTML="<span class='fa fa-heart'></span>";
hobbylabel.style.color="green";
return true;
}else if(count == 1){
hobbylabel.innerHTML="至少选两个";
hobbylabel.style.color="red";
} else{
hobbylabel.innerHTML="请选择爱好";
hobbylabel.style.color="red";
}
}
//籍贯验证
//获取
function jiguanCheck(){
var jiguan = document.getElementById("jiguan").value;
var jiguanlabel = document.getElementById("jiguanlabel");
//验证
if(jiguan == "" || jiguan == null){
jiguanlabel.innerHTML="未选择";
jiguanlabel.style.color="red";
return false;
}else{
jiguanlabel.innerHTML="<span class='fa fa-heart'></span>";
jiguanlabel.style.color="green";
return true;
}
}
//文本域验证
function textheck(){
var textname = document.getElementById("liuyan").value;
var textlabel = document.getElementById("textlabel");
//验证
if(textname == "" || jiguan == null){
textlabel.innerHTML="未选择";
textlabel.style.color="red";
return false;
}else{
textlabel.innerHTML="<span class='fa fa-heart'></span>";
textlabel.style.color="green";
return true;
}
}
//表单提交验证
function formCheck(){
var rs1 = unameCheck();
var rs2 = pwdCheck();
var rs3 = repwdCheck()
var rs4 = genderCheck();
var rs5 = hobbyCheck();
var rs6 = jiguanCheck();
var rs7 = textheck();
if(rs1&&rs2&&rs3&&rs4&&rs5&&rs6&&rs7){
return true;
}else{
return false;
}
}
</script>
总结
最初使写的简单验证方法吧，主要结合在每个表单属性中加入鼠标时间，再有JavaScript编写 验证 更改等信息。
具体是利用document.getElementById（）或者document.getElementsByName（）获得表单属性中值，随后对属性值进行非空判断（但是例如单选框radio，多选框checkbox是利用获得属性者的大小在由chenk属性判断是否以点击）。
JavaScriptDay2-简单网页表单验证的更多相关文章
- VC提交网页表单（一共八篇）
VC提交网页表单-自动评论留言(1)http://blog.csdn.net/wangningyu/article/details/4526357VC提交网页表单-自动评论留言(2)http://bl ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- 用Tchromium替代webbrowser提交网页表单有关问题
用Tchromium替代webbrowser提交网页表单有关问题 提交表单时,使用js脚本,然后用 chrm.browser.Frame['ff'].ExecuteJavaScript 提交就可以 ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- 简单的表单验证插件（Jquery）
在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...
- jQuery简单前端表单验证
<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...
随机推荐
- ASP.NET MVC 实现有论坛功能的网站（有iis发布网站）
ASP.NET MVC. M 为Model模型层, V 为View视图层, C 为Controller控制层.要想使用MVC框架来写网站就需要了解M V C 的作用分别为哪些.给大家简单的介绍一下: ...
- 背水一战 Windows 10 (53) - 控件（集合类）: ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid
[源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...
- C++数组初始化方法
定义: ]; // array of 10 uninitialized ints 此 new 表达式分配了一个含有 10 个 int 型元素的数组,并返回指向该数组第一个元素的指针,此返回值初始化了指 ...
- MariaDB 备份与日志管理(13)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
- win10安装Ubuntu双系统
1.软碟通做启动盘,不要用easyBCD,比较麻烦 2.windows10中取消选择"启用快速启动(推荐)" 3.压缩出空白卷 4.重启时按F12 5.在bios中将boot pr ...
- 记一次线上事故的JVM内存学习
今天线上的hadoop集群崩溃了,现象是namenode一直在GC,长时间无法正常服务.最后运维大神各种倒腾内存,GC稳定后,服务正常.虽说全程在打酱油,但是也跟着学习不少的东西. 第一个问题:为什么 ...
- 【重要通知】本人所有技术文章转移至https://zzqcn.github.io
本人所有技术文章转移至 https://zzqcn.github.io
- solr初识
参考资料http://blog.csdn.net/l1028386804/article/details/70199983
- C#导出Excel文件Firefox中文件名乱码
首先说明下:我的解决方法不一定适用于其他遇到该问题的人,因为情况多种多样,适合我的方法不一定适合别人,就像我在遇到问题时查到别人的解决方案放到我的代码里却不管用,所以这个方法仅供参考 这两天做了一个导 ...
- day 71 crm(8) 权限组件的设置,以及权限组件的应用
---恢复内容开始--- 前情提要: strak 组件是增删改查组件 , 生活中,需求权限组件, 不足: 1,前后端不分离, 2, 空url也会刷新界面,造成资源浪费 3,如果角色忘记设置权 ...