A jquery-based registration form with ToolTip form validation

Today to share a jquery-based registration form, this registration form is characterized by the confirmation of the submission of registration information, the form will automatically verify the information filled out, if the information is filled in error, the corresponding field will be in the form of a ToolTip to display the message. This jquery form is very simple to implement and relatively lightweight to use.

Online preview Source Download

This plugin JS to refer to the Jquery.js library, there is a easyform.js library.

The HTML code section is as follows:

    <Divclass= "Form-div">        <formID= "Reg-form"Action=""Method= "POST">        <Table>            <TR>                <TD>User name</TD>                <TD>                    <inputname= "UID"type= "text"ID= "UID"Easyform= "Length:4-16;char-normal;real-time;"message= "Username must be a 4-16-bit English letter or number"Easytip= "Disappear:lost-focus;theme:blue;"Ajax-message= "User name already exists!">                </TD>            </TR>            <TR>                <TD>Password</TD>                <TD>                    <inputname= "PSW1"type= "Password"ID= "PSW1"Easyform= "length:6-16;"message= "Password must be 6-16-bit"Easytip= "Disappear:lost-focus;theme:blue;">                </TD>            </TR>            <TR>                <TD>Confirm Password</TD>                <TD>                    <inputname= "PSW2"type= "Password"ID= "PSW2"Easyform= "length:6-16;equal: #psw1;"message= "Two times password input to match"Easytip= "Disappear:lost-focus;theme:blue;">                </TD>            </TR>            <TR>                <TD>Email</TD>                <TD>                    <inputname= "Email"type= "text"ID= "Email"Easyform= "Email;real-time;"message= "email format to be correct"Easytip= "Disappear:lost-focus;theme:blue;"Ajax-message= "This email address has been registered, please change it!">                </TD>            </TR>            <TR>                <TD>Nickname</TD>                <TD>                    <inputname= "nickname"type= "text"ID= "nickname"Easyform= "Length:2-16"message= "Nickname must be 2-16-bit"Easytip= "Disappear:lost-focus;theme:blue;">                </TD>            </TR>        </Table>        <Divclass= "Buttons">            <inputvalue= "Register"type= "Submit"style= "margin-right:20px; margin-top:20px;">            <inputvalue= "I have an account, I want to log in"type= "button"style= "margin-right:45px; margin-top:20px;">        </Div>        <BRclass= "Clear">        </form>    </Div>    <Scripttype= "Text/javascript">$ (document). Ready (function () {            $('#reg-form'). Easyform ();    }); </Script>

via:http://www.w2bc.com/article/13972

A jquery-based registration form with ToolTip form validation