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实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php strnatcmp()函数的用法总结
2013/11/27 PHP
YII实现分页的方法
2014/07/09 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
试用php中oci8扩展
2015/06/18 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
python实现用户答题功能
2018/01/17 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
2014年电工工作总结
2014/11/20 职场文书
爱情保证书
2015/01/17 职场文书
运动与健康自我评价
2015/03/09 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python