使用者登入模組 - 7 表單校驗 - validate外掛
阿新 • • 發佈：2020-12-06
JavaWeb綜合案例 - 使用者登入：6 表單校驗 - validate外掛
官網:
https://niceue.com/validator/demo/index.php
使用步驟
-
將"validate"資料夾,複製到web目錄下
-
在需要校驗的頁面,引入外掛資源
<script src="validate/jquery-1.11.0.min.js"></script> <script src="validate/jquery.validator.min.js"></script> <script src="validate/local/zh-CN.js"></script> <link href="validate/jquery.validator.css" rel="stylesheet"> -
給表單項新增校驗規則
data-rule="使用者名稱:required;length[2~10]" data-rule="年齡:required;range[1~150]"
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>使用者登入</title> </head> <body> <script src="validate/jquery-1.11.0.min.js"></script> <script src="validate/jquery.validator.min.js"></script> <script src="validate/local/zh-CN.js"></script> <link href="validate/jquery.validator.css" rel="stylesheet"/> <%-- 表單提交 --%> <form action="${pageContext.request.contextPath}/loginServlet" method="post"> 使用者名稱: <input type="text" id="username" name="username" data-rule="使用者名稱:required;length[4~]" placeholder="請輸入使用者名稱"><br> 密碼: <input type="password" name="password" data-rule="密碼:required" placeholder="請輸入密碼"><br> 確認密碼: <input type="password" class="password" id="confirmpwd" data-rule="確認密碼:match(password)" placeholder="請輸入確認密碼"><br> Email: <input type="email" class="email" id="email" data-rule="電子郵箱:email" placeholder="電子郵箱"><br> 年齡： <input type="age" class="age" name="age" data-rule="年齡:required;range[1~150]" placeholder="年齡"><br> 手機號： <input type="text" class="form-control" name="phone" data-rule="required; mobile" data-rule-mobile="[/^1[37589]\d{9}$/, '請檢查手機號格式']" placeholder="請輸入手機號"><br> <input type="submit" value="登入"> </form> <%-- 顯示登入錯誤資訊 --%> <div style="color: red"> ${msg} </div> </body> </html>