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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
javascript中的this作用域详解
Jul 15 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
vue在线动态切换主题色方案
Mar 26 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小偷相关截取函数备忘
2010/11/28 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
javascript引用对象的方法
2007/01/11 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
python list语法学习(带例子)
2013/11/01 Python
linux 下实现python多版本安装实践
2014/11/18 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python变量赋值的秘密分享
2018/04/03 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
大学生的自我鉴定范文
2014/01/21 职场文书
企业宣传口号
2014/06/12 职场文书
会议欢迎标语
2014/06/30 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
爱国主题班会教案
2015/08/14 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
MySQL导致索引失效的几种情况
2022/06/25 MySQL