<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>歡迎登錄</title> <link rel="stylesheet" type="text/css" href="themes/icon.css"/> <link rel="stylesheet" type="text/css" href="themes/gray/easyui.css"/> </head> <body> <div id="loginWin" class="easyui-window" title="登錄" style="width:350px;height:188px;padding:5px;" minimizable="false" maximizable="false" resizable="false" collapsible="false"> <div class="easyui-layout" fit="true"> <div region="center" border="false" style="padding:5px;background:#fff;border:1px solid #ccc;"> <form id="loginForm" method="post"> <div style="padding:5px 0;"> <label for="login">帳號:</label> <input type="text" name="login" style="width:260px;"></input> </div> <div style="padding:5px 0;"> <label for="password">密碼:</label> <input type="password" name="password" style="width:260px;"></input> </div> <div style="padding:5px 0;text-align: center;color: red;" id="showMsg"></div> </form> </div> <div region="south" border="false" style="text-align:right;padding:5px 0;"> <a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0)" onclick="login()">登錄</a> <a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" onclick="cleardata()">重置</a> </div> </div> </div> </body> <script type="text/javascript" src="js/jQuery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jQuery/jquery.easyui.min.js"></script> <script type="text/javascript"> document.onkeydown = function(e){ var event = e || window.event; var code = event.keyCode || event.which || event.charCode; if (code == 13) { login(); } } $(function(){ $("input[name='login']").focus(); }); function cleardata(){ $('#loginForm').form('clear'); } function login(){ if($("input[name='login']").val()=="" || $("input[name='password']").val()==""){ $("#showMsg").html("用戶名或密碼為空，請輸入"); $("input[name='login']").focus(); }else{ //ajax異步提交 $.ajax({ type:"POST", //post提交方式默認是get url:"login.action", data:$("#loginForm").serialize(), //序列化 error:function(request) { // 設置表單提交出錯 $("#showMsg").html(request); //登錄錯誤提示信息 }, success:function(data) { document.location = "index.action"; } }); } } </script> </html>
esayui 有自帶的輸入框驗證，因為我要做打開頁面時就把光標定在用戶名的文本框內，這樣的話它直接就會報輸入為空的警告，所以就自己寫的驗證