Jquery implements smart forms and jquery smart forms

Jquery implements smart forms and jquery smart forms

Currently, many website registration modules can check whether the format is correct in real time. This greatly enhances the user experience and is very beneficial to development.

The following code uses jquery to instantly check the format of a form field (including the Field Length and email format). At the same time, it checks the event again when submitting the form field.

Note that this check is mainly performed on keyup and focus, and these two events are used to trigger the blur (loss of focus) event.

<! DOCTYPE html> // Textbox loss focus event $ ("form: input "). blur (function () {var $ parent = $ (this ). parent (); $ parent. find (". formtips "). remove (); 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 = "entered correctly" $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span> ') ;}} 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 = "entered correctly" $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span> ');}}}). keyup (function () {$ (this ). triggerHandler ("blur"); // keyup and focus use triggerHandler to trigger the blur event }). focus (function () {$ (this ). triggerHandler ("blur") ;}); $ ("# send "). click (function () {// submit button event $ ("form. required: input "). trigger ('blur'); var numError = $ ('form. onerror '). length; if (numError) {return false;} alert ("registration successful, the password has been sent to your mailbox, please check ");});}); </script>