js表单验证实例讲解

本文实例为大家分享了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • js实现表单及时验证功能 用户信息立即验证

    js实现表单及时验证功能 用户信息立即验证

    问题:表单怎么在输入后立即验证,而不是提交后再验证那么不方便(网上搜到的要么是模棱两可,要么是残缺不全-) 方法:鉴于此,小可,水山奇,将其代码补全,加上小可我个人的理解(注释)在上面,仅供后来者少走弯路,也请各路好汉批评指正-(转发请注作者,xiexie)----table表格版,以后会继续有JQuery版- 如果帮助到您,顶一下 ヾ(≧O≦)"嗷~ 截图: 代码: <!DOCTYPE html> <html> <head> <meta http-eq

  • AngularJS自动表单验证

    AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module. 有关angular-auto-validate: 安装:npm i angular-auto-validate 引用:<script src="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js&qu

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • 详解AngularJS实现表单验证

    详解AngularJS实现表单验证

    开始学习AngularJS表单验证: 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <<input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <<input type="tex

  • javascript html5实现表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

  • 常用javascript表单验证汇总

    常用javascript表单验证汇总

    实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒. 效果图: <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p>请输入数字.如果输入值不是数字,浏览器会弹出提示框.</p> <input id="demo" type="text"> <script> function

  • 拥有一个属于自己的javascript表单验证插件

    拥有一个属于自己的javascript表单验证插件

    自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

随机推荐