JQueryMiniUI Quick Start: form development (4)

Form development includes layout, verification, loading, submission, clearing, and resetting. As follows: the form layout uses the HTMLTable label to implement any rich form layout: & lt; tableclass & quot; form-table & quot; border & quot; 0 & quot; cellpadding & quot; 1 & quot; cellspacing & quot; 2 & q

Form development includes layout, verification, loading, submission, clearing, and resetting.
As follows:


Form Layout
Use HTML Table tags to implement any rich form layout:

 

Name:		Address:
Gender:		Age:
Note:

Data Verification
Listen to the "validation" event of the control, and customize the verification rules and error description information:

Function onUserNameValidation (e ){
If (e. isValid ){
If (isEmail (e. value) = false ){
E. errorText = "the email address must be entered ";
E. isValid = false;
}
}
}
Use the mini. Form component to verify multiple controls:
Var form = new mini. Form ("# form1 ");
Form. validate ();
Load Form

$. Ajax ({
Url: "../data/FormService. aspx? Method = LoadData ",
Type: "post ",
Success: function (text ){
Var data = mini. decode (text); // deserialize the object
Form. setData (data); // you can specify multiple controls.
}
});
Submit Form

// Submit form data

Var form = new mini. Form ("# form1 ");
Var data = form. getData (); // obtain the data of multiple controls in the form.
Var json = mini. encode (data); // serialize to JSON
$. Ajax ({
Url: "../data/FormService. aspx? Method = SaveData ",
Type: "post ",
Data: {submitData: json },
Success: function (text ){
Alert ("submitted successfully, returned result:" + text );
}
});
Clear form
Form. clear ();
 
Reset form
Form. reset ();