学习使用juery，体验它的强大。
本文需用到的文件：jquery.js，jquery-ui.js，jquery.validate.js，messages_zh.js和juery的主题。jquery ui可前往官网下载，messages_zh.js是validate的本地化，可不用。
为简单，后台代码仅使用了一个servlet。
前台代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> test </title>
<link rel="stylesheet" href="themes/base/jquery-ui.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="messages_zh.js"></script>
<style>
body{font-size:0.8em;}
label, input { display:inline; }
input.text { margin-bottom:8px; margin-top:8px;width:50%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
</style>
<script>
$(function() {
$("#myform").validate({
rules: {
name: {required: true},
password: {required:true,rangelength:[6,25]}
},
errorPlacement:function(error, element) {
error.appendTo(element.next().next());
},
messages:{
"password":{required:"请输入密码！"},
"name":{required:"请输入用户名！"}
}
});
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 260,
width: 350,
modal: true,
buttons: {
"登录": function() {
if($("#myform").valid()){
$.ajax({
url:"LoginServlet",
async:false,
data:{name:$( "#name" ).val(),password:$( "#password" ).val()},
type:"POST",
success:function(data){
if(data == "false"){
alert("错误的用户名或密码！");
}else{
$("#username").html(data);
$( "#dialog-form" ).dialog( "close" );
}
}
});
}
},
"取消": function() {$( this ).dialog( "close" );}
}
});
$( "#login" ).button().click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
</head>
<body>
<h3>欢迎<strong id="username"></strong></h3>
<hr>
<div id="dialog-form" title="欢迎登录">
<form id="myform" method="post">
<fieldset>
<label for="name">用户名:</label>
<input type="text" name="name" id="name" class="text" placeholder="昵称/邮箱/手机号码" /><br>
<label style="margin-left:30px;color:red"></label><br>
<label for="password">密 码:</label>
<input type="password" name="password" id="password" class="text" placeholder="请输入密码"/><br>
<label style="margin-left:30px;color:red"></label><br>
</fieldset>
</form>
</div>
<button id="login">登录</button>
</body>
</html>
后台代码
package com.shanlin.login;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setContentType("text/html;charset=UTF-8");
if(name.trim().equals("admin")&&password.trim().equals("123456")){
response.getWriter().print(name);
}else{
response.getWriter().print(false);
}
}
}
效果如图：
![jQuery UI 日期选择器（Datepicker）使用总结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)