运用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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现简单拖拽效果
Jul 20 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保存带BOM文件的方法
2015/02/12 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python表示矩阵的方法分析
2017/05/26 Python
python实现网站微信登录的示例代码
2019/09/18 Python
使用python实现飞机大战游戏
2020/03/23 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
舞蹈教师自荐信
2014/01/27 职场文书
《画家乡》教学反思
2014/04/22 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书