Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to use jQuery to achieve form verification function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Don't forget to introduce the jQuery framework!

Without saying too much, just go to part of the jQuery code:

$(document) .ready (function () {var tip1 = "user name cannot be empty!"; / / declare that the span var tip2 added after the input box when an error occurs is "the mailbox is malformed or cannot be empty!"; var tip3 = "the address cannot be empty!"; var tip4 = "password length cannot be less than five digits and up to ten digits!" Var condition = / ^ ([\ .a-zA-Z0-9 letters -]) + @ ([a-zA-Z0-9 letters -]) + (\. [a-zA-Z0-9 letters -]) + /; / declare the condition $(".id") .blur (function () {if (! $(".id"). Val ()) {/ determine that the user name is not empty $(".span1") .blur () $(".id") .after (tip1);} else {$(".span1"). Remove ();}}); $(".email") .blur (function () {if (! condition.test ($(".email") .blur ()) {/ / determine the mailbox format $(".span2") .remove (); $(".email") .after (tip2) } else {$(".span2") .remove ();}}); $(".adress") .blur (function () {if (! $(".adress") .blur ()) {/ / determine that the address is not empty $(".span3") .remove (); $(".adress") .after (tip3);} else {$(".span3") .blur ();}) $(".pwd") .blur (function () {if ($(".pwd"). Val () .blur)

10) {/ / determine that the password length cannot be less than 5 digits and not more than 10 digits $(".span4") .remove (); $(".pwd") .after (tip4);} else {$(".span4") .remove ();}}) Click (".button") .click (function () {/ / if all the conditions are met, the pop-up form is verified. If not, the pop-up window reminds the user to change if (! $(".id"). Val () | condition.test ($(".email"). Val ()) | |! $(".adress"). Val () | | $(".pwd"). Val (). Length.

10) {alert ("Registration information is incorrect, please change your personal information");} else {alert ("registered successfully");})})

Structure and style:

Welcome to register the original demon.

User name:

Mailing   box:

Local   address:

Secret   code:

Note     book span {color:white;} body {font-family: sans-serif;} .main _ box {width:100%; height: 910px; background-color: red; background-image: linear-gradient (# e66465, # 000000);} .title {font-size: 5eme; color:white; width:100%; height: 100px; text-align: center;} .box {width: 1050px; height: 310px; margin: 150px auto 50px auto Padding-left: 360px;} input {height: 40px; width: 200px; border-radius: 20px; border: solid 1px # B5B5B5; margin: 10px; font-size:1.2em;} form {color:white; font-size:1.2em; float: left; margin-left: 50px;} .button {width: 280px; height: 40px; background-color: # 9781FDD; border-radius: 25px; color:white; font-size: 1.3em Font-weight: 700; margin-top: 10px;} .img {width:310px; height: 310px; float: left;} "how to implement form validation with jQuery" is here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.