本文介绍了Java书城项目的第一阶段——使用JQuery进行动态表单验证，包括用户名、密码、邮箱和验证码的验证规则。详细阐述了总体和具体需求，以及工程目录和代码实现。涉及的技术栈包括Java、HTML、CSS、JavaScript、JQuery等。
1）文笔有限，如果发现博客有书写有误的地方恳请读者直言不讳，我一定会第一时间改正。
2）代码的具体实现可以参考代码中的注释，如果由于注释不清楚而不明白相应原理，可以与作者私聊。码字不易，有兴趣的小伙伴点个赞呗，大家相互学习。
3）本篇博客为Java书城项目第一阶段：表单验证，如需了解其它部分，欢迎点击链接。
- Java书城项目第一阶段：表单验证
- Java书城项目第二阶段：用户模块
- Java书城项目第三阶段：优化
- Java书城项目第四阶段：图书模块
- Java 书城项目最终阶段：总结与视频演示
- Java 书城项目源代码
4）该项目技术栈为：Java、MySQL、HTML、CSS、JavaScript、JQuery、XML、Tomcat、Servlet等，兄弟们也可查看我的其它文章，下面为链接：
- 静态网页开发技术之HTML
- 动态网页开发技术之JSP
- EL表达式与JSTL标签库
- Servlet必知必会
在慢慢增加了，等等哈
1 需求
1.1 总体需求
运用JQuery技术来实现动态注册 ，同时实现表单的验证以及上传，即验证注册信息是否满足要求。
1.2 具体需求
- 验证用户名：必须由字母，数字下划线组成，并且长度为5 到12 位
- 验证密码：必须由字母，数字下划线组成，并且长度为5 到12 位
- 验证确认密码：和密码相同
- 邮箱验证：xxxxx@xxx.com
- 验证码验证：因为还没讲到服务器的验证码生成，所以，现阶段将验证码固定为“1234”
2 工程目录与约定
图1.1 regist.html文件位置
我们需要利用JQuery技术来实现表单的验证，那么该HTML文件中会有一些链接，这里先做一个约定：即在没有使用框架之前，我们使用base+相对路径，在使用框架后，使用的是绝对路径。其中，运用JQuery技术来实现动态注册，其中#username的目的就是#id选择器；利用正则表达式来实现表单数据的验证（验证其是否满足格式）；
3 代码实现
<!--这是书城项目的第一部分，表单验证-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<!--在html文件中加入base标签，而且base标签只对当前页面有效。base目录对应的是Web这个目录，写base路径是
为了永远固定相对路径跳转的结果。如果不知道下面哪个需要改，那就把它运行起来，按F12，刷新浏览器，看哪个爆红就改哪个。-->
<base href="http://localhost:8080/book_market/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成之后
//运用Jquery技术来实现动态注册，其中#username的目的就是#id选择器 KO by sharm. 2020.11.6
$(function () {
// 给注册绑定单击事件
$("#sub_btn").click(function () {
// 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
//1 获取用户名输入框里的内容
var usernameText = $("#username").val();
//2 创建正则表达式对象
var usernamePatt = /^\w{5,12}$/;
最低0.47元/天 解锁文章
1189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
