Jquery is a simple form verification instance and jquery form instance.
Form Verification is often encountered during website development. We can use server-side language verification or client-side language verification. This article introduces a simple example of jquery client verification form. The instance is for reference only.
<Body> <form method = "post" action = ""> <div class = "int"> <label for = "username"> username: </label> <! -- Add required for each required element --> <input type = "text" id = "username" class = "required"/> </div> <div class = "int"> <label for = "email"> email: </label> <input type = "text" id = "email" class = "required"/> </div> <div class = "int"> <label for =" personinfo "> personal data: </label> <input type = "text" id = "personinfo"/> </div> <div class = "sub"> <input type = "submit" value =" submit "id =" send "/> <input type =" reset "id =" res "/> </div> </form> </B Ody> <script src = "/Public/js/jquery-1.7.1.min.js"> </script> <script type = "text/javascript"> // <! [CDATA [$ (function () {/** the idea is to first add a required tag for each required and implement it using the each () method. * Create an element in the each () method. Then, add the created element to the parent element through the append () method. * This describes the essence of this. Each time this corresponds to the corresponding input element, the corresponding parent element is obtained. * Then add a focus loss event to the input element. Then, verify the user name and email. * Here we use a judgment is (). If it is a user name, it will be processed accordingly. If it is an email, it will be verified accordingly. * In the jQuery framework, you can also insert original javascript code. For example, the authentication username contains this. value, and this. value. length. Determine the content. * Then, the email is verified. It seems that a regular expression is used. * Add a keyup event and a focus event to the input element. The verification is also required during keyup. You can call the blur event. TriggerHandler () trigger is used to trigger the corresponding event. * Perform unified verification when submitting the form at the end * handle the whole and details * // if required, add the Red Star logo. $ ("form: input. required "). each (function () {var $ required = $ ("<strong class = 'high'> * </strong>"); // create an element $ (this ). parent (). append ($ required); // then append it to the document}); // $ ('form: input') after the text box loses focus '). blur (function () {var $ parent = $ (this ). parent (); $ parent. find (". formtips "). remove (); // verify the username if ($ (this ). is ('# username') {if (this. value = "" | this. value. length <6) {Var errorMsg = 'enter at least 6 usernames. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify the email if ($ (this ). is ('# email') {if (this. value = "" | (this. value! = ""&&! /. + @. + \. [A-zA-Z] {2, 4} $ /. test (this. value) {var errorMsg = 'enter the correct email address. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span> ');}}}). keyup (function () {$ (this ). triggerHandler ("blur ");}). focus (function () {$ (this ). triggerHandler ("blur") ;}); // end blur // submit for final verification. $ ('# Send '). click (function () {$ ("form: input. required "). trigger ('blur'); var numError = $ ('form. onerror '). length; if (numError) {return false;} alert ("registration successful, the password has been sent to your mailbox, please check. ") ;}); // reset $ ('# res '). click (function () {$ (". formtips "). remove () ;};}) //]> </script>
You can copy the code here to run this instance.
Address: http://www.manongjc.com/article/290.html
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
