jquery validate的漂亮css樣式驗證，jqueryvalidate
自己結合了在網上找的驗證功能和漂亮的提示同能後做出來的驗證 希望大家喜歡
頁面代碼代碼
- <!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><TITLE>滑鼠移至上方 - 蘋果·志 - goldapple's blog</TITLE>
- <META http-equiv=Content-Type content="text/html; charset=utf-8">
- <STYLE type=text/css>
- BODY {
- FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
- }
- {
- PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
- }
- A {
- DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none
- }
- UL {
- MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none
- }
- LI {
- FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center
- }
- LABEL {
- DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px
- }
- input.error{
- border: 2px dashed red;
- }
- </STYLE>
-
- <SCRIPT src="images/jquery.min.js" type=text/javascript></SCRIPT>
- <SCRIPT src="jquery.validate.js" type=text/javascript></SCRIPT>
- <SCRIPT type=text/javascript>
-
-
- $(function(){
-
-
-
-
- $('#a input').hover(function(){
-
- $(this).parent().find('label').animate({opacity:"show",left:"-85px"},500);//.show();
- },function(){
-
- $(this).parent().find('label').animate({opacity:"hide",left:"-105px"},500);//.hide();
- });
-
-
-
-
- $("#signupForm").validate({
-
- rules: {
- password: {
- required: true,
- minlength: 5
- },
- name:{
- required:true
- }
- },
- messages: {
- password: {
- required: "請輸入密碼",
- minlength: jQuery.format("密碼不能小於{0}個字元")
- },
- name:{
- required:"測試"
- }
- },success:function(){
- $("label.error").remove();
- }
- });
-
-
- })
-
-
-
-
-
-
- </SCRIPT>
-
- <META content="MSHTML 6.00.2900.5803" name=GENERATOR></HEAD>
- <BODY>
- <form id="signupForm">
- <div id="a">
- <UL>
- <LI><div><input type="text" name="password"></div> </LI>
- <LI><input type="text" name="name"> </LI>
- </UL>
- </div>
- </form>
- </BODY></HTML>
- jquery_validate漂亮的驗證.zip (323 KB)
- 下載次數: 680
- jquery_validator漂亮的css驗證.zip (
