运用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返回定位插件详解
May 15 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jquery插件实现图片悬浮
Apr 16 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系统类函数
2015/10/21 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
完美的php分页类
2017/10/24 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
jQuery实现表格隔行换色
2018/09/01 jQuery
VSCode搭建React Native环境
2020/05/07 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
vue实现购物车加减
2020/05/30 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python中的id()函数指的什么
2017/10/17 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Numpy之reshape()使用详解
2019/12/26 Python
深入浅析python的第三方库pandas
2020/02/13 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python中time包实例详解
2021/02/02 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
家长学校培训材料
2014/08/20 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL