Home > Developer > JavaScript
Jquery uses validate in combination with CSS to implement beautiful verification. jqueryvalidate
I have combined the verification functions I found on the Internet with the beautiful tips. I hope you will like the verification.
<! 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> mouse hover-over goo-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: "Enter the password", minlength: jQuery. format ("password cannot be less than {0} characters")}, name: {required: "test" }}, 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> <input type = "text" name = "name"> </LI> </UL> </div> </form> </BODY> </HTML>
Isn't it very beautiful? You can also beautify your friends according to your own requirements. I hope my friends will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
