簡單的表單驗證--js,jsp,jquery,java,mysql(前臺和後臺驗證)(
阿新 • • 發佈：2019-01-22
<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#name-error,#password-error{
color:red;
padding-left:10px;
font-size:14px;
}
</style>
</head>
<body>
<h3>系統登入</h3>
<%
String code = request.getParameter("code");
if("1001".equals(code)) {
%>
<div style="color:red">使用者名稱或密碼錯誤,請重新輸入</div>
<%} else if("1002".equals(code)) { %>
<div style="color:red">請先登入</div>
<%} %>
<form action="login.jsp" method="post" id="myform">
姓名：<input type="text" name="username" id="username"/><span id="name-error">使用者名稱不能為空</span><br/>
密碼：<input type="password" name="password" id="password" /><span id="password-error">密碼不能為空</span><br/>
<input type="button" id="btn" value="提交" /> <input type="reset" value="重置"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var name = $("input[name='username']").val();
var pwd = $("input[name='password']").val();
$("#username").keydown(function (){
$("#name-error").html(" ");
});
$("#password").keydown(function (){
$("#password-error").html(" ");
});
$("#username").change(function (){
var name = $("input[name='username']").val();
if(name.length <=4||name.length>=19){
$("#name-error").html("使用者名稱不正確,請輸入5-18位字元");
return;
}
});
$("#password").change(function (){
var password = $("input[name='password']").val();
if(password.length != 3){
$("#password-error").html("密碼不正確，請輸入3位有效數字");
return;
}else{
$("#btn").click(function(){
$("#myform").submit();
});
}
});
});
</script>
</body>
</html>