案例：验证表单

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

    body {

      background: #ccc;

    }

    label {

      width: 40px;

      display: inline-block;

    }

    span {

      color: red;

    }

    .container {

      margin: 100px auto;

      width: 400px;

      padding: 50px;

      line-height: 40px;

      border: 1px solid #999;

      background: #efefef;

    }

    span {

      margin-left: 30px;

      font-size: 12px;

    }

    .wrong {

      color: red

    }

    .right {

      color: green;

    }

    .defau {

      width: 200px;

      height: 20px;

    }

    .de1 {

      background-position: 0 -20px;

    }

  </style>

</head>

<body>

<div class="container" id="dv">

  <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>

  <label>手机</label><input type="text" id="phone"><span></span><br/>

  <label>邮箱</label><input type="text" id="e-mail"><span></span><br/>

  <label>座机</label><input type="text" id="telephone"><span></span><br/>

  <label>姓名</label><input type="text" id="fullName"><span></span><br/>

</div>

<script src="common.js"></script>

<script>

  //qq的

  checkInput(my$("qq"),/^\d{5,11}$/);

  //手机

  checkInput(my$("phone"),/^\d{11}$/);

  //邮箱

  checkInput(my$("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);

  //座机号码

  checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);

  //中文名字

  checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);

  //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来

  //通过正则表达式验证当前的文本框是否匹配并显示结果

  function checkInput(input,reg) {

    //文本框注册失去焦点的事件

    input.onblur=function () {

      if(reg.test(this.value)){

        this.nextElementSibling.innerText="正确了";

        this.nextElementSibling.style.color="green";

      }else{

        this.nextElementSibling.innerText="让你得瑟,错了吧";

        this.nextElementSibling.style.color="red";

      }

    };

  }

</script>

</body>

</html>

JS高级---案例：验证表单的更多相关文章

  1. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...

  2. js验证表单大全

    js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...

  3. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  4. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  5. jQuery的validation插件(验证表单插件)

    更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www. ...

  6. tp框架之自动验证表单

    tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...

  7. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  8. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  9. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

随机推荐

  1. winForm学习 2019年4月11日

    1.Directory静态类 相似类:File.Path.StreamReader.StreamWirter 创建文件夹:Directory.CreateDirectory 删除文件夹:Directo ...

  2. Ajax工作原理及优缺点

    1. Ajax是什么? 全称是 asynchronous javascript and xml,是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果(无需重新加载整个网页的情况下),实现页面的 ...

  3. 解决Python3.7安装pygame报错You are using pip version 10.0.1, however version 19.1 is available.

    背景: 学习python开发中,需要用到pygame插件,因此按照参考书<Python编程实践,从入门到实践>指引安装Pygame包. 但是利用pip 命令安装 .whl 文件时,报错(如 ...

  4. 打印机打印pdf文件特别慢怎么解决

    PDF等文件中都包含了一些或者很多光栅化数据(图片.嵌入的字体等).这些文件在打印时,打印机驱动程序都会在系统中生成大量EMF文件(增强型变换文件),小到1MB,大到500MB,过大的EMF临时文件会 ...

  5. while语句的使用

    学习while语句的正确用法:题目:老师教学生,讲一次之后 问学生会不会,如果不会:就再讲一遍.如果会了就放学,但是如果连讲了十遍还是不会,那也要放学回家 namespace _44讲十遍会不会 { ...

  6. JS函数深入

    函数的本质是对象 三种定义方式 1.  字面量=function声明 function add() { // body... } add(); 2.  var赋值表达式 var add = funct ...

  7. Linux网络课程学习第三天

    第三天在线视频学习. 学习内容:继续详细介绍了第二章节 Linux常用命令的使用方法. 学习感受:万事开头难,作为Linux零基础的我相信在这本书学完之后会有所收获. 学习心得:记住刘老师的一句口头禅 ...

  8. 静态路由、RIP、SOPF、VLAN间的路由

    常用命令: clear ip router * --清楚全部路由 show ip route --显示路由表 show ip inter b--显示接口信息 show ip protocols  -- ...

  9. 0级搭建类011-Oracle Linux 7.x安装(OEL 7.7) 公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  10. Python该怎么入门?Python入门教程(非常详细)

    Python要学多久可以学会,达到精通呢? 任何知识都是基础入门比较快,达到通晓的程序是需求时日的,这是一个逐渐激烈的进程. 通晓任何一门编程语言,都需求通过大量的实践来积累经验,解决遇到的各种疑难问 ...