iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何运用jQuery写的验证表单
  • 177
分享到

如何运用jQuery写的验证表单

2024-04-02 19:04:59 177人浏览 安东尼
摘要

这篇文章主要介绍了如何运用Jquery写的验证表单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。//运用jQuery写的验证表单<!D

这篇文章主要介绍了如何运用Jquery写的验证表单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

//运用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写的验证表单”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网JavaScript频道,更多相关知识等着你来学习!

--结束END--

本文标题: 如何运用jQuery写的验证表单

本文链接: https://www.lsjlt.com/news/78536.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何运用jQuery写的验证表单
    这篇文章主要介绍了如何运用jQuery写的验证表单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。//运用jQuery写的验证表单<!D...
    99+
    2024-04-02
  • 如何用jQuery重写表单验证
    这篇文章主要讲解了“如何用jQuery重写表单验证”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用jQuery重写表单验证”吧!前面我们曾介绍过使用jQ...
    99+
    2024-04-02
  • jquery表单验证怎么写
    在前端开发中,表单验证是必不可少的一项技能。表单验证可以保证用户输入的数据的正确性和合法性,有效地减少了数据错误的概率,给用户带来良好的体验。本文将介绍如何使用jQuery对表单进行验证。框架与插件在使用jQuery对表单进行验证时,我们可...
    99+
    2023-05-25
  • jQuery表单验证的代码怎么写
    这篇文章主要介绍“jQuery表单验证的代码怎么写”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。 jQu...
    99+
    2024-04-02
  • jQuery如何实现表单验证
    这篇文章主要为大家展示了“jQuery如何实现表单验证”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现表单验证”这篇文章吧。具体代码如下所示:...
    99+
    2024-04-02
  • jQuery实现表单验证
    使用jQuery实现表单验证,供大家参考,具体内容如下 register.html <!DOCTYPE html> <html lang="en"> &l...
    99+
    2024-04-02
  • jquery中validate如何实现表单验证
    这篇文章主要介绍了jquery中validate如何实现表单验证,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、目的为了更好地实现人机交互...
    99+
    2024-04-02
  • jquery如何表单验证不能为数字
    这篇文章主要介绍“jquery如何表单验证不能为数字”,在日常操作中,相信很多人在jquery如何表单验证不能为数字问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery...
    99+
    2024-04-02
  • JQuery中validate如何验证一个单独的表单元素
    这篇文章给大家分享的是有关JQuery中validate如何验证一个单独的表单元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前提:已引入JQuery validate插件fu...
    99+
    2024-04-02
  • jQuery怎么实现表单验证
    这篇文章将为大家详细讲解有关jQuery怎么实现表单验证,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体代码如下所示:<script type=&quo...
    99+
    2024-04-02
  • jQuery实现表单验证功能
    jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证 如下图 别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type...
    99+
    2024-04-02
  • jquery表单验证插件validation怎么用
    这篇文章主要为大家展示了“jquery表单验证插件validation怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery表单验证插件validat...
    99+
    2024-04-02
  • jQuery表单验证插件怎么使用
    要使用jQuery表单验证插件,你需要按照以下步骤进行操作:1. 引入jQuery库和jQuery表单验证插件的源文件。在HTML文...
    99+
    2023-10-18
    jQuery
  • jQuery如何实现验证表单密码一致性
    这篇文章将为大家详细讲解有关jQuery如何实现验证表单密码一致性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 脚本<script type...
    99+
    2024-04-02
  • 如何使用jQuery表单验证插件和日历插件
    这篇文章主要为大家展示了“如何使用jQuery表单验证插件和日历插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery表单验证插件和日历插件”这...
    99+
    2024-04-02
  • vue表单验证rules及validator验证器如何使用
    这篇文章主要介绍“vue表单验证rules及validator验证器如何使用”,在日常操作中,相信很多人在vue表单验证rules及validator验证器如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答...
    99+
    2023-07-02
  • 如何用JavaScript实现表单验证
    这篇“如何用JavaScript实现表单验证”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何用JavaScript实现表单...
    99+
    2023-06-30
  • jQuery中Validate如何提交表单验证失败扩展
    这篇文章主要为大家展示了“jQuery中Validate如何提交表单验证失败扩展”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery中Validate如何...
    99+
    2024-04-02
  • ajax中怎么利用 jquery 异步表单验证
    这篇文章将为大家详细讲解有关ajax中怎么利用 jquery 异步表单验证,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 文件...
    99+
    2024-04-02
  • layui如何实现表单验证
    这篇文章主要介绍layui如何实现表单验证,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在网上看到很多validform和layer配合的验证方式,但是觉得写的不好,不清不楚的,于是...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作