JavaScript表单验证实例之验证表单项是否为空


Posted in Javascript onJanuary 10, 2016

表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了。

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://3water.com/" /> 
<title>js简单表单验证</title> 
<script type="text/javascript">
window.onload=function()
{
var bt=document.getElementById("bt");
bt.onclick=function()
{
if(document.myform.name.value=="")
{
alert("用户名不能为空!");
document.myform.name.focus();
return false;
} 
else if(document.myform.pw.value=="")
{
alert("密码不能为空!");
document.myform.pw.focus();
return false; 
}
}
}
</script>
</head>
<body>
<form action="index.php" method="get" name="myform">
<ul>
<li>姓名:<input type="text" name="name" id="name" /></li>
<li>密码:<input type="text" name="pw" id="age" /></li>
<li><input type="submit" id="bt"/></li>
</ul> 
</form>
</body>
</html>

以上代码,当点击提交按钮的时候,能够进行简单的表单验证,如果表单项为空,那么就会弹出提示,并且将焦点放入当前表单项,代码比较简单,这里距不多介绍了,可以参阅相关阅读。

下面在来看下js验证表单实例代码:

gspan.html

<html>
 <head>
 <title>表单验证实例</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-" />
 <script src="check.js" type="text/javascript"></script>
 <style>
 span{ font-size:px; }
 .stats{ color : #ccc; }
 .stats{ color :black; }
 .stats{ color :red; }
 .stats{ color :green; }
 </style>
 </head>
 <body>
 <form method="post" action="reg.php" onsubmit="return regs('click')" >
 用户名:<input type="text" name="username" /><span class="stats">用户名不能为空</span><br/>
 邮箱:<input type="text" name="email" /><span class="stats">邮箱不能为空</span><br/>
 密码:<input type="password" name="password" /><span class="stats">密码不能为空</span><br/> 
 确认密码:<input type="password" name="chkpass" /><span class="stats">密码不能为空</span><br/>
 <input type="submit" />
 </form>
 </body>
 </html>

check.js

function gspan(cobj){ //获取表单后的span 标签 显示提示信息
if (cobj.nextSibling.nodeName != 'SPAN'){ 
gspan(cobj.nextSibling); 
} else { 
return cobj.nextSibling;
}
} 
//检查表单 obj【表单对象】, info【提示信息】 fun【处理函数】 click 【是否需要单击, 提交时候需要触发】 
function check(obj, info, fun, click){ 
var sp = gspan(obj); 
obj.onfocus = function(){ 
sp.innerHTML = info; 
sp.className = 'stats';
}
obj.onblur = function(){
if (fun(this.value)){
sp.innerHTML = "输入正确!";
sp.className = "stats";
} else {
sp.innerHTML = info;
sp.className = "stats";
}
}
if (click == 'click'){
obj.onblur();
}
}
onload = regs; //页面载入完执行
function regs(click){
var stat = true; //返回状态, 提交数据时用到
username = document.getElementsByName('username')[];
password = document.getElementsByName('password')[];
chkpass = document.getElementsByName('chkpass')[];
email = document.getElementsByName('email')[];
check(username, "用户名的长度在-之间", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(password, "密码必须在-位之间", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(chkpass, "确定密码要和上面一致,规则也要相同", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <= && val == password.value){
return true;
} else {
stat = false;
return false;
}
}, click);
check(email, "请按邮箱规则输入", function(val){
if (val.match(/\w+@\w+\.\w/)){
return true;
} else {
stat = false;
return false;
}
}, click);
return stat;
}
Javascript 相关文章推荐
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
实例讲解javascript注册事件处理函数
Jan 09 #Javascript
详解javascript事件冒泡
Jan 09 #Javascript
js父页面中使用子页面的方法
Jan 09 #Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
缓存技术详谈―php
2006/12/14 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
使用prototype.js进行异步操作
2007/02/07 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python版简单工厂模式
2017/10/16 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python检查ping终端的方法
2019/01/26 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python中return的返回和执行实例
2019/12/24 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
全运会口号
2014/06/20 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
师德师风自我评价范文
2014/09/11 职场文书
导游词开场白
2015/01/31 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
首席执行官观后感
2015/06/03 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
vue elementUI表格控制对应列
2022/04/13 Vue.js