运用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+pjax简单示例汇总
Apr 21 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
JavaScript实现省市联动效果
2019/11/22 Javascript
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python中按值来获取指定的键
2019/03/04 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
数学专业毕业生自荐信
2013/11/10 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
初中学习计划书范文
2014/09/15 职场文书
个人求职意向书
2015/05/11 职场文书
律政俏佳人观后感
2015/06/09 职场文书
三好学生竞选稿
2015/11/21 职场文书
高中历史教学反思
2016/02/19 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python