运用jQuery写的验证表单(实例讲解)


Posted in jQuery onJuly 06, 2017

//运用jQuery写的验证表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="js/jquery-1.3.1.js"></script>
  <script src="js/lib/jquery.validate.js"></script>
  <script src="js/lib/jquery.validate.messages_cn.js"></script>
  <style>
    body {
      font: 12px/19px Arial, Helvetica, sans-serif;
      color: #666;
    }

    form div {
      margin: 5px 0;
    }

    .int label {
      float: left;
      width: 100px;
      text-align: right;
    }

    .int input {
      padding: 1px 1px;
      border: 1px solid #ccc;
      height: 16px;
    }

    .sub {
      padding-left: 100px;
    }

    .sub input {
      margin-right: 10px;
    }

    .formtips {
      width: 200px;
      margin: 2px;
      padding: 2px;
    }

    .onError {
      background: #FFE0E9 url(images/reg3.gif) no-repeat 0 center;
      padding-left: 25px;
    }

    .onSuccess {
      background: #E9FBEB url(images/reg4.gif) no-repeat 0 center;
      padding-left: 25px;
    }

    .high {
      color: red;
    }
  </style>
  <script>
    $(function () {
      $("form :input.required").each(function () {
        var $required = $("<strong class='high'>*</strong>");
        $(this).parent().append($required);
      })
      $("form :input").blur(function () {
        var $parent = $(this).parent();
        $(".formtips").remove();
        if ($(this).is("#username")) {
          if (this.value == '' || this.value.length < 6) {
            var errmsg = '请输入正确的格式.';
            $parent.append('<span class="formtips onError">' + errmsg + '</span>')
          } else {
            var sucssemsg = '格式输入正确';
            $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
          }
        }
        if ($(this).is("#email")) {
          //邮箱格式正则表达式的用法
          if (this.value == '' || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {
            var errmsg = '请输入正确的格式.';
            $parent.append('<span class="formtips onError">' + errmsg + '</span>')
          } else {
            var sucssemsg = '格式输入正确';
            $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
          }
        }
      })
      $("#send").click(function () {
          var onerr = $(this).parent().siblings().children().hasClass("onError");//出错就会添加class为onerror的元素
          if(onerr) {
            return false;
          } else {
            alert("你已经注册成功了");
          }
        }
      )
      $("#reset").click(function () {
        $(".formtips").remove();
      })
    })
  </script>
</head>
<body>

<form method="post" action="">
  <div class="int">
    <label for="username">用户名:</label>
    <input type="text" id="username" class="required"/>
  </div>
  <div class="int">
    <label for="email">邮箱:</label>
    <input type="text" id="email" class="required"/>
  </div>
  <div class="int">
    <label for="personinfo">个人资料:</label>
    <input type="text" id="personinfo"/>
  </div>
  <div class="sub">
    <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
  </div>
</form>

</body>
</html>

以上这篇运用jQuery写的验证表单(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery EasyUI $.Parser
Jun 02 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
You might like
php模拟js函数unescape的函数代码
2012/10/20 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
react项目实践之webpack-dev-serve
2018/09/14 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python中的集合介绍
2019/01/28 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
实习生自荐信范文分享
2013/11/27 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
运动会广播稿50字
2014/01/26 职场文书
班主任新年寄语
2014/04/04 职场文书
营销学习心得体会
2014/09/12 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书