Login interface
Download jquery-2.1.4 and EasyUI1.4.4 first
Referencing related files to the foreground page
The HTML is as follows:
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2 <Headrunat= "Server">3 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>4 <title>Landing</title>5 <Scriptsrc=".. /jquery-2.1.4/jquery.min.js "></Script>6 <Scriptsrc=".. /easyui1.4.4/jquery.easyui.min.js "></Script>7 <Linkhref=".. /easyui1.4.4/themes/default/easyui.css "rel= "stylesheet" />8 <Linkhref=".. /easyui1.4.4/themes/icon.css "rel= "stylesheet" />9 <Scriptsrc= "Javascript.js"></Script>Ten <Linkhref= "Login.css"rel= "stylesheet" /> One </Head> A <Body> - <formID= "Form1"runat= "Server"> - <DivID= "Login"> the <P>Administrator account:<inputtype= "text"ID= "Manager"class= "TextBox" /></P> - <P>Administrator Password:<inputtype= "text"ID= "Password"class= "TextBox"/></P> - </Div> - <DivID= "BTN"> + <ahref="#"class= "Easyui-linkbutton">Login</a> - + </Div> A </form> at </Body> - </HTML>
JS file contents are as follows:
1$(function() {//Login Interface2$ ("#login"). dialog ({3Title: ' Login Backstage ',4width:300,5height:180,6Modaltrue,7Buttons: "#btn",8 });9 Ten //Input Box Validation One$ ("#manager"). Validatebox ({ ARequiredtrue,//whether to verify -Missingmessage: ' Please enter the Administrator account! ',//display content when empty -Invalidmessage: ' Admin account cannot be empty! ', the }); -$ ("#password"). Validatebox ({ -Requiredtrue, -Validtype: ' length[6,30] ',//validation rules +Missingmessage: ' Please enter the Administrator password! ', -Invalidmessage: ' admin password must be between 6-30 bits! ',//the prompt that appears when the contents of the text box are validated as invalid. + A }); at - //Click to login -$ ("#btn a"). Click ( - function () { - if(!$ ("#manager"). Validatebox (' IsValid ')) {//determine if validation is passed -$ ("#manager"). focus (); in } - Else if(!$ ("#password"). Validatebox (' IsValid ')) {//determine if validation is passed to$ ("#password"). focus (); + } - Else { theAlert ("In-Submission ..."); * } $ }Panax Notoginseng ); - if(!$ ("#manager"). Validatebox (' IsValid ')) {//determine if validation is passed the$ ("#manager"). focus (); + } A Else if(!$ ("#password"). Validatebox (' IsValid ')) {//determine if validation is passed the$ ("#password"). focus (); + } -});
The CSS style sheet content is as follows:
Body{}#login{padding:6px 0 0 0;}P{Height:22px;Line-height:22px;padding:4px 0 0 25px;}. TextBox{Height:22px;padding:0 2px;}. Easyui-linkbutton{padding:0 10px;}#btn{text-align:Center;}
Such a simple landing interface is complete.
This can be used as a template for the next step of the development of interactive data validation with the database.
Jquery-ui Background Management (1)