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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
html中table数据排序的js代码
Aug 09 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP自动生成月历代码
2006/10/09 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
对Python3使运行暂停的方法详解
2019/02/18 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
党员思想汇报范文
2013/12/30 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年人事部工作总结
2014/12/03 职场文书
还款承诺书范本
2015/01/20 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记