zoukankan      html  css  js  c++  java
  • jQuery Validate 验证成功时的提示信息

    大多数时候我们使用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

  • 相关阅读:
    if控制器+循环控制器+计数器,控制接口分支
    前置处理器
    逻辑控制器
    配置元件
    基础元件
    docker etcdctl报错:etcdctl No help topic for 'put'
    celery定时执行ansible api返回为空的问题
    Ansible+Jenkins+Gitlab搭建及配置
    进击的Python【第十六章】:Web前端基础之jQuery
    进击的Python【第十五章】:Web前端基础之DOM
  • 原文地址:https://www.cnblogs.com/kiimi/p/8406851.html
Copyright © 2011-2022 走看看