JS开发验证表单教程之项目介绍

本课程以开发《javascript开发验证表单》做为课程项目实例，为大家讲解开发《javascript开发验证表单》的思路。

准备工作：

新建一个form.html页面，然后进行布局，编写js代码

下面我们来看一下开发验证表单的流程图：

流程图.png

我们来讲解一下流程图

1.首先我们要判断用户名是否为空，不为空我们接着判断是否符合规范，不符合要求，给出提示信息，符合规范我们接着往下验证

2.验证密码是否为空，为空给出提示信息，不为空，判断是否符合规范

3接着判断邮箱，为空是给出提示信息，不为空，使用正则表达式匹配，是否符合邮箱格式

4在判断爱好是否为空，为空给出提示信息，不为空看是否符合规范。

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="30" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>

提交重置代码

自动运行