JS应用实例1：注册页面表单校验
这里是简单的前端校验，后边还会介绍后台的校验。
多重校验保证获取安全数据
步骤：
1.确定事件onsubmit，并绑定函数
2.编写函数，作用是获取输入数据
3.判断数据是否合法，合法则提交，否则表单不提交
HTML代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<table>
<!--3.注册表单-->
<tr>
<!--嵌套一个十行二列的表格-->
<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="34px" id="user" />
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil" />
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" />
</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="34px" />
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body> </html>
效果：
JS代码：
<script>
function checkForm() {
/**校验用户名*/
//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("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) {
alert("邮箱格式不正确!");
return false;
} }
</script>
然而这种方式很low，用户希望的是验证信息出现在输入框的后边，并且随着输入而随时验证
这里会用到onfocus、onblur事件
HTML代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script>
function showTips(id, info) {
document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";
} function check(id, info) {
//1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
//2.进行校验
if(uValue == "") {
document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
} else {
document.getElementById(id + "span").innerHTML = "";
}
}
</script>
</head> <body>
<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="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')" /><span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil" />
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" />
</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="34px" />
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body> </html>
效果：
JS应用实例1：注册页面表单校验的更多相关文章
- JavaScript学习——使用JS完成注册页面表单校验
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...
- 【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)
(一)初版:事件(onsubmit) 步骤分析: 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id> ...
- JavaScript学习——完善注册页面表单校验
1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...
- 分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js正则表达式注册页面表单验证
可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）
在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...
- JQuery注册页面表单检验完善
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用JQuery.Validate插件来校验页面表单有效性
使用JQuery.Validate插件来校验页面表单有效性1. [代码] 常见的注册表单元素 <form action="#" method="post" ...
- SpringMVC接收页面表单参数-java-电脑编程网
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
随机推荐
- SQL Server中有关约束（constraint）的一些细节
本文出处:http://www.cnblogs.com/wy123/p/7350265.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...
- mysql之my.cnf详解
以下是 my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容 ...
- C++ 实现分数的四则运算
对分数求加减乘除,以及化简 #include<iostream> #include<math.h> using namespace std; struct Fraction{ ...
- stark组件开发之批量操作
class UserInfoHandler(StartHandler): ....... # 批量操作功能的列表,添加则显示, 使用此功能.需要将StartHandler.display_checkb ...
- java ssh执行shell脚本
1.添加依赖 com.jcraft:jsch ch.ethz.ganymed:ganymed-ssh2:262 2.获取连接 conn = new Connection(ip, port); conn ...
- 一不注意,在Unity3D中DllImport 引起的Bug.
单要说这个Bug是很简单,但是得从头说起. 一些大型的网络游戏,或者加载比较多的一些场景时,如果要等待所有模型,贴图等各种资源文件加载完毕才能执行游戏,对用户将会是一个很头大的事情.所以就需要用到动态 ...
- Linux 网卡Bond模式
网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡. 有7种模式: mod 0/mod 1/mod 2/mod 3/mod 4/mod 5 mod=0 ,即:(ba ...
- 2019.03.04 bzoj5308: [Zjoi2018]胖（二分答案+st表）
传送门 想题5分钟调题两小时系列 其实还是我tcl 读完题之后自然会知道一个关键点能够更新的点是一段连续的区间,于是我们对于每个点能到的左右区间二分答案,用ststst表维护一下查询即可. 代码: # ...
- 1.MFC架构分析
1.架构代码文件的结构 主要由四个部分组成 1.资源文件Resource.h:主要定义资源的ID 2.预编译文件:stdafx.h 可以用来解决头文件包含冲突的问题,定义一些需要全局性包含的文件. 3 ...
- 修改maven 本地仓库，加入阿里云
阿里云仓库服务 http://maven.aliyun.com/mvn/view maven加入阿里云服务 在maven conf文件下修改settings.xml 修改本地仓库<localR ...