Ajax表單驗證
阿新 • • 發佈：2019-01-01
registered.jsp
<%@ 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> <html> <head> <title>CarMessageSystem</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="<%=path%>/Css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/Css/bootstrap-responsive.css" /> <link rel="stylesheet" type="text/css" href="<%=path%>/Css/style.css" /> <script type="text/javascript" src="<%=path%>/Js/jquery.js"></script> <script type="text/javascript" src="<%=path%>/Js/jquery.sorted.js"></script> <script type="text/javascript" src="<%=path%>/Js/bootstrap.js"></script> <script type="text/javascript" src="<%=path%>/Js/ckform.js"></script> <script type="text/javascript" src="<%=path%>/Js/common.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <style type="text/css"> body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { max-width: 300px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff; border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin input[type="text"], .form-signin input[type="password"] { font-size: 16px; height: auto; margin-bottom: 15px; padding: 7px 9px; } </style> <style type="text/css"> .code { background: url(code_bg.jpg); font-family: Arial; font-style: italic; color: blue; font-size: 30px; border: 0; padding: 2px 3px; letter-spacing: 3px; font-weight: bolder; float: left; cursor: pointer; width: 90px; height: 30px; line-height: 60px; text-align: center; vertical-align: middle; } a { text-decoration: none; font-size: 12px; color: #288bc4; } a:hover { text-decoration: underline; } </style> <script type="text/javascript"> var code; function createCode() { code = ""; var codeLength = 6; //驗證碼的長度 var checkCode = document.getElementById("checkCode"); var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候選組成驗證碼的字元，當然也可以用中文的 for (var i = 0; i < codeLength; i++) { var charNum = Math.floor(Math.random() * 52); code += codeChars[charNum]; } if (checkCode) { checkCode.className = "code"; checkCode.innerHTML = code; } } function validateCode() { var inputCode = document.getElementById("inputCode").value; var username = $("#username").val(); var password = $("#password").val(); var password2 = $("#password2").val(); $("#msg").remove();/* 刪除元素 */ if ("" == username) { $("#username").after("<span id='msg' style='color:red;font-size:15px'>使用者名稱不能為空!</span>"); return false; } $("#msg").remove();/* 刪除元素 */ if (username.length<10) { $("#username").after("<span id='msg' style='color:red;font-size:15px'>使用者名稱太短!</span>"); return false; } if(/.*[\u4e00-\u9fa5]+.*$/.test(username)) { $("#username").after("<span id='msg' style='color:red;font-size:15px'>不能包含漢字!</span>"); return false; } $("#msg").empty(); if ("" == password) { $("#password").after("<span id='msg' style='color:red;font-size:15px'>密碼不能為空!</span>"); return false; } $("#msg").empty(); if (password.length<8) { $("#password").after("<span id='msg' style='color:red;font-size:15px'>密碼不能小於8位!</span>"); return false; } $("#msg").empty(); if (password != password2) { $("#msg").empty(); $("#password2").after("<span id='msg' style='color:red;font-size:15px'>兩次密碼不一致!</span>"); return false; } if (inputCode.length <= 0) { alert("請輸入驗證碼！"); return false; } else if (inputCode.toUpperCase() != code.toUpperCase()) { alert("驗證碼輸入有誤！"); createCode(); return false; } else { return true; } } </script> <script type="text/javascript"> window.onload = function() { createCode(); } </script> <script> $.validator.setDefaults({ submitHandler: function1() { alert("提交事件!"); return false; } }); $().ready(function() { $("#commentForm").validate(); }); </script> </head> <body> <div class="container"> <form class="form-signin" action="<%=path%>/usercontrol/registered.spring" onsubmit="return validateCode()" method="post"> <h2 class="form-signin-heading">使用者註冊</h2> <input type="text" name="username" id="username" class="input-block-level" placeholder="賬號"> <input type="password" id="password" name="password" class="input-block-level" placeholder="密碼"> <input type="password" name="password2" id="password2" class="input-block-level" placeholder="驗證密碼"><br> <input type="text" name="verify" class="input-medium" placeholder="驗證碼" id="inputCode"><br> <div class="code" id="checkCode" onclick="createCode()"></div> <br> <br> <br> <p> <button class="btn btn-large btn-primary" type="submit">註冊</button> <a href="./login.jsp">已有賬號?點我登入</a> </p> <h4 style="color: red">${error }</h4> </form> </div> </body> </html>