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 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
vant自定义二级菜单操作
Nov 02 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
2014最热门的24个php类库汇总
2014/12/18 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
javascript cookies操作集合
2010/04/12 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python制作微博图片爬取工具
2021/01/16 Python
python中time包实例详解
2021/02/02 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
幼教简历自我评价
2014/01/28 职场文书
社区活动邀请函范文
2014/01/29 职场文书
租赁协议书范本
2014/04/22 职场文书
中职生自荐信范文
2014/06/15 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2014最新离职证明范本
2014/09/12 职场文书
委托证明范本
2014/11/25 职场文书
面试通知邮件
2015/04/20 职场文书
筑梦中国心得体会
2016/01/18 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技