js表单验证实例讲解


Posted in Javascript onMarch 31, 2016

本文实例为大家分享了js表单验证,供大家参考,具体内容如下

JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证。
被JavaScript 验证的这些典型的表单数据有:
1)、用户是否已填写表单中的必填项目?
2)、用户输入的邮件地址是否合法?
3)、用户是否已输入合法的日期?
4)、用户是否在数据域 (numeric field) 中输入了文本?

 gspan.html

<html>
<head>
  <title>表单验证实例</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="check.js" type="text/javascript"></script>
  <style>
    span{ font-size:12px; }
    .stats1{ color : #ccc; }
    .stats2{ color :black; }
    .stats3{ color :red; }
    .stats4{ color :green; }
 
  </style>
</head>
<body>
  <form method="post" action="reg.php" onsubmit="return regs('click')" >
    用户名:<input type="text" name="username" /><span class="stats1">用户名不能为空</span><br/>
    邮箱:<input type="text" name="email" /><span class="stats1">邮箱不能为空</span><br/>
    密码:<input type="password" name="password" /><span class="stats1">密码不能为空</span><br/>
    确认密码:<input type="password" name="chkpass" /><span class="stats1">密码不能为空</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 = 'stats2';
  }
 
  obj.onblur = function(){
    if (fun(this.value)){
      sp.innerHTML = "输入正确!";
      sp.className = "stats4";
    } else {
      sp.innerHTML = info;
      sp.className = "stats3";
    }
  }
 
  if (click == 'click'){
    obj.onblur();
  }
}
 
onload = regs;   //页面载入完执行
 
function regs(click){
  var stat = true;    //返回状态, 提交数据时用到
  username = document.getElementsByName('username')[0];
  password = document.getElementsByName('password')[0];
  chkpass = document.getElementsByName('chkpass')[0];
  email = document.getElementsByName('email')[0];
   
  check(username, "用户名的长度在3-20之间", function(val){
    if (val.match(/^\S+$/) && val.length >=3 && val.length <=20){
      return true;
    } else {
      stat = false;
      return false;
    }
  }, click);
 
  check(password, "密码必须在6-20位之间", function(val){
    if (val.match(/^\S+$/) && val.length >= 6 && val.length <=20){
      return true;
    } else {
      stat = false;
      return false;
    }
  }, click);
 
   
  check(chkpass, "确定密码要和上面一致,规则也要相同", function(val){
    if (val.match(/^\S+$/) && val.length >=6 && val.length <=20 && 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开发技术大全-第3章 js数据类型
Jul 03 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 #Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 #Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 #Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 #Javascript
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
js几个不错的函数 $$()
2006/10/09 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
shiro授权的实现原理
2017/09/21 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
学前教育专业毕业生自荐信
2013/10/03 职场文书
如何写好自荐信
2014/04/07 职场文书
预备党员转正材料
2014/12/19 职场文书
个人创业事迹材料
2014/12/30 职场文书
城南旧事读书笔记
2015/06/29 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android