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 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python构造函数及解构函数介绍
2015/02/26 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
2014年小学重阳节活动策划方案
2014/09/16 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技