1. 程式人生 > >jquery validate 驗證正確提示資訊

jquery 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>