JS开发验证表单教程之项目介绍
本课程以开发 《javascript开发验证表单》做为课程项目实例，为大家讲解开发 《javascript开发验证表单》的思路。
准备工作：
新建一个form.html页面，然后进行布局，编写js代码
下面我们来看一下开发验证表单的流程图：
我们来讲解一下流程图
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>
预览
Clear
- 课程推荐
- 课件下载
课件暂不提供下载，工作人员正在整理中，后期请多关注该课程~ 