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>
提交重置代码