JavaScript学习——使用JS完成注册页面表单校验
1、步骤分析
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。
onsubmit = return checkForm()
2、完成注册页面表单校验（此案例注册页面表单校验效果基于HTML&CSS——网站注册页面）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function checkForm(){
//alert("aa"); /**校验用户名*/
//1.获取用户输入的数据
var uValue=document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空");
return false;
} /**校验密码*/
var pValue=document.getElementById("password").value;
if(pValue==""){ //注意空的表示方法
alert("密码不能为空");
return false;
} /** 校验确认密码*/
var rpValue=document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致！");
return false;
} /**校验邮箱*/
var eValue=document.getElementById("email").value;
if(！/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px"/>
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr> <!--2.导航栏部分-->
<tr height="50px" >
<td bgcolor="black">
<a href="#"><font size="3" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr> <!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" size="35px" id="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" size="35px" id="repassword"/>
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input type="text" name="e-mail" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr> <!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr> <!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
在校验确认密码这部分使用了正则表达式（不需要记忆，需要时查找文档）
正则式.test(校验对象)为真表示符合条件，为假则不符合。
JavaScript学习——使用JS完成注册页面表单校验的更多相关文章
- 【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)
(一)初版:事件(onsubmit) 步骤分析: 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id> ...
- JavaScript学习——完善注册页面表单校验
1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...
- JS应用实例1：注册页面表单校验
这里是简单的前端校验,后边还会介绍后台的校验. 多重校验保证获取安全数据 步骤: 1.确定事件onsubmit,并绑定函数 2.编写函数,作用是获取输入数据 3.判断数据是否合法,合法则提交,否则表单 ...
- js正则表达式注册页面表单验证
可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- 分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）
在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...
- JQuery注册页面表单检验完善
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS实现给页面表单设置触发默认按钮
var defaultBtnId; function setDefaultButton(id) { defaultBtnId = id; } document.onkeydown = function ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
随机推荐
- [转]SQL Server 数据库规范
SQL Server 数据库规范 一. 命名规范常用对象命名规范,使用帕斯卡命名法(Pascal,单词首字母大写),统一使用英文. 1. 表.英文单数名词,尽量写完整单词名称一般不超过3个英文单词都可 ...
- mac修改管理员权限命令
我们在进行mac 命令行安装软件的时候,有的时候会遇见这样的问题:Please try running this command again as root/Administrator. 如图: 解决 ...
- ZBrush 4R7中自定义笔刷
为了便于雕刻,ZBrush®很人性化地设计了自定义笔刷.随着ZBrush软件版本不断更新,功能也在不断完善.只是在笔刷面板ZBrush软件就为用户提供了上百种之多,如果我们想要用某种笔刷,一个个找起来 ...
- react-redux源码解析(资料)
资料:https://www.cnblogs.com/hhhyaaon/p/5863408.html 感觉很棒,记录一下
- [luogu2592 ZJOI2008] 生日聚会 (计数dp)
题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...
- ArchLinux出现ACPI ERROR的解决方法
ArchLinux关机.重启时出现ACPI错误: ACPI Error:Method parse/execution failed \_SB.PCI0.PGON,AE_AML_LOOP_TIMEOUT ...
- vue svg的使用
项目要求: 需要把websocket推送的数据进行展示.不停地刷掉旧的数据.但是需要根据数据坐标圈出来对应的车辆. 开始使用的是canvas进行画图,思路是使用absolute定位,for循环,在图片 ...
- pytorch 6 batch_train 批训练
import torch import torch.utils.data as Data torch.manual_seed(1) # reproducible # BATCH_SIZE = 5 BA ...
- poj 3254 Corn Fields （状压dp）（棋盘dp）
状压dp入门题 因为当前行的状态只和上一行有关 所以可以一行一行来做 因为m <= 12所以可以用二进制来表示放了或者没有放 0表示没放,1表示放 f[i][state]表示第i行状态为stat ...
- Git：Git的安装过程
Git:Git的安装过程 路径不要存在空格 默认即可,第一项为是否在页面显示 文本编辑器,默认VIM即可 设置环境变量: 1)最安全的选择,path环境变量不会改变,你只能在git bash里使用命令 ...