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 触发事件列表 比较不错
Sep 03 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
JavaScript 中的六种循环方法
Jan 06 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
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python如何获取服务器硬件信息
2017/05/11 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python实现顺序表的简单代码
2018/09/28 Python
python读取文件名并改名字的实例
2019/01/07 Python
python通过实例讲解反射机制
2019/10/17 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
民族团结先进集体事迹材料
2014/05/22 职场文书
研究生个人学年总结
2015/02/14 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS