运用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
Angular2使用jQuery的方法教程
May 28 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php学习笔记之面向对象
2014/11/08 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
详解python while 函数及while和for的区别
2018/09/07 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python实现低通滤波器代码
2020/02/26 Python
python如何爬取网页中的文字
2020/07/28 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
几道PHP面试题
2013/04/14 面试题
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
销售督导岗位职责
2015/04/10 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android