如：如果用戶名不符合要求，則在輸入框右邊提示“用戶名不符合要求！”
要求: 不用javascript
提示:
1. 使用Layui模板
2. 用戶名正則運算式是"[\\u4E00-\\u9FA5a-zA-Z0-9-_\\d\\u00B7]{4,20}"
代碼如下
register.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.util.regex.*" %>
<!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" href="https://bbs.csdn.net/topics/css/layui.css">
<link rel="stylesheet" href="https://bbs.csdn.net/topics/css/global.css">
</head>
<body>
<div class="layui-bg-black">
<div class="layui-container">
<ul class="layui-nav">
<li class="layui-nav-item" style="font-size: 25px">網站倉庫</li>
</ul>
</div>
</div>
<div class="layui-container fly-marginTop">
<div class="fly-panel">
<div class="layui-tab layui-tab-brief">
<form class="layui-form" action="" target="iframe">
<div class="layui-form-item">
<label class="layui-form-label" style="font-size: 20px">用戶注冊</label>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用戶名</label>
<div class="layui-input-inline" style="width: 250px">
<input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<!-- 用戶名錯誤提示 -->
<div class="layui-form-mid error-tip">
<!-- 提示資訊，如果用戶名不符合要求，則提示“用戶名不符合要求！”-->
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-form-mid">
用戶名長度為4-20位，由數字、英文字母、漢字、減號(-)、下劃線(_)和間隔號(·)組成
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">郵箱</label>
<div class="layui-input-inline" style="width: 250px">
<input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<!-- 郵箱錯誤提示 -->
<div class="layui-form-mid error-tip">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密碼</label>
<div class="layui-input-inline" style="width: 250px">
<input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<!-- 密碼錯誤提示 -->
<div class="layui-form-mid error-tip">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-form-mid">
密碼長度為8-20位，且至少包含一個字母
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">確認密碼</label>
<div class="layui-input-inline" style="width: 250px">
<input type="password" name="password" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
<!-- 確認密碼錯誤提示 -->
<div class="layui-form-mid error-tip">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block"></div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn">注冊</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<a class="link" href="https://bbs.csdn.net/topics/welcome.jsp">已有用戶? 登錄</a>
</div>
</div>
</form>
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</div>
</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/241055.html
標籤：Web 開發
上一篇：求助！急！python專案