大多数时候我们使用validate进行前台验证的时候，都是验证错误的时候给出提示信息，最近在做一个项目的时候，想这验证成功后给出一个验证成功的提示。于是在网上找了一些资料。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>嗖嗖嗖</title>

<style>

ul li{

  list-style:none;

  margin-top:5px;

}

label.success {

  color:green;

}

</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>

<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>

<script>

$(document).ready(function () {

  $("#myform").validate({

    success: function (succ, element) {    //验证成功后执行的代码

      if (element.name == "username") {

        succ.text("你的名字真好听").addClass("success");

      } else if (element.name == "pw") {

        succ.text("你的密码真安全").addClass("success");

      } else {

        succ.text("邮箱是正确的").addClass("success");

      }

    },

    rules: {

      username: "required",

      pw: "required",

      email: "required"

    },

    messages: {

      name: "用户名是必填项目",

      pw: "密码是必填项目",

      email: {

        required: "邮箱是必填项目",

        email:"邮箱格式不正确"

      }

    }

  });

});

</script>

</head>

<body>

<form id="myform">

  <ul>

    <li>姓名:<input type="text" name="username"/></li>

    <li>密码:<input type="password" name="pw"/></li>

    <li>邮箱:<input type="text" name="email"/></li>

    <li>

      <input type="submit" value="提交"/>

      <input type="reset" value="重置"/>

    </li>

  </ul>

</form>

</body>

</html>

参考目录：http://www.softwhy.com/article-249-1.html

jQuery Validate 验证成功时的提示信息的更多相关文章

  1. jquery validate验证remote时的多状态问题

    因为远程验证用户名时可能会出现几种错误情况: 1.用户名字符非法: 2.长度超限: 3.用户名已经存在: 但remote返回的内容只能是布尔型的,即使用dataFilter来过滤也不知道如何对应的把错 ...

  2. jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用

    jQuery Validate验证框架自定义验证 第一步导入导入js库 <script src="<%=basePath%>static/js/jquery.js" ...

  3. jquery.validate验证表单配合回调提交和h5.storage本地保存笔记

    表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...

  4. jQuery Validate验证框架详解，提交前验证

    现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...

  5. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  6. jquery.validate 验证机制

    jquery.validate 验证机制 金刚 juqery juqery.validate 在开发系统时,使用了jquery.validate.js 这个验证插件,来校验数据合法性 重点 验证是以i ...

  7. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  8. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  9. jQuery.Validate 验证,以及 remote验证, 多参数传递

    jQuery.Validate 验证: http://www.runoob.com/jquery/jquery-plugin-validate.html 教程网址,很简单, 今天主要在这里记录一下re ...

随机推荐

  1. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

    在router目录下的index.js文件中,对path属性加上/:id. 使用router对象的params.id 例如 :  this.$route.params.id

  2. wiki部署

      一.准备环节 1.上传软件   [root@web01 tools]# tar xf jdk-8u60-linux-x64.tar.gz -C /application/ [root@web01 ...

  3. 20、Nginx高可用架构

    1.Keepalived高可用基本概述 1.1.什么是高可用 一般是指2台机器启动着相同的业务系统,当有一台机器down机了, 另外一台服务器能快速的接管, 对于访问的用户是无感知的. 1.2.高可用 ...

  4. Django 数据库模块 单独使用

    pip install django pip install psycopg2 pip install mysqlclient Entity.py from django.db import mode ...

  5. EfficientNet学习笔记

    EfficientNet是谷歌大脑在2019年提出的,论文地址是:https://arxiv.org/pdf/1905.11946.pdf 这篇文章主要想解决的一个问题是,如何平衡网络的深度.宽度和分 ...

  6. Idea 汉化后定位和系统设置打不开到问题

    百度网盘:此汉化包已经修正过,拿来直接可以用 链接:https://pan.baidu.com/s/1wm3NbYSM9Gtsdu2EHQPMIA 密码:qdr3 1.系统设置(setting)外观选 ...

  7. Hibernate的缓存(收集)

    (1)缓存就是把以前从数据库中查询出来和使用过的对象保存在内存中(一个数据结构中),这个数据结构通常是或类似Hashmap,当以后要使用某个对象 时,先查询缓存中是否有这个对象,如果有则使用缓存中的对 ...

  8. Mongodb中的js语法

    定义一个变量 > var len = 10; For循环 这里的db和data都可以作为对象 save是方法 接收一个临时定义的对象 > for(var i = 0; i < len ...

  9. 华为集群后killsql命令和查看mr占用的磁盘空间

    (1) linux后台:yarn application -list 找到相应的命令 粘贴job (2)去FI manager 的 yarn上粘贴job 看详细过程 (3)确定后 在linux后台 y ...

  10. head&tail命令

    1.tail tail命令用途是按照要求将指定的文件的最后部分输出到标准设备, 一般是终端,通俗来讲,就是把某个档案文件的最后几行显示到终端上, 如果该档案有更新,tail会自动刷新,确保你看到最新的 ...