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 ...
随机推荐
- js中的数据类型有
- oracle数据库名称已被一现有约束条件占用
使用oracle数据库出现名称已被一现有约束条件占用的错误,我的原因是在同一个库中有一个表使用了外键FK_SNO,自己新建的一个表中也使用了外键FK_SNO,导致出现了错误. 这时改变一下外键FK_S ...
- 如何使用Shiro
一.架构 要学习如何使用Shiro必须先从它的架构谈起,作为一款安全框架Shiro的设计相当精妙.Shiro的应用不依赖任何容器,它也可以在JavaSE下使用.但是最常用的环境还是JavaEE.下面以 ...
- HTML 元素大小
1.元素的偏移量 元素的可见大小是由其高度.宽度决定,包括所有的内边距.滚动条和边框大小(不包括外边距). offsetHeight :元素在垂直方向上占用的空间大小,以像素计算.包括元素的高度,水平 ...
- PhoenixFD插件流体模拟——UI布局【Resimulation】详解
Liquid Resimulation 流体再(重)渲染 本文主要讲解Resimulation折叠栏中的内容 主要内容 Overview 综述 Parameters 参数 综述 Liquid Resi ...
- Javascript的算法题目
用js实现单链表的增删,直接上代码 const linkList=new LinkList() function LinkList(){ var Node=function(element){ thi ...
- Codeforces Round #508 (Div. 2)
Codeforces Round #508 (Div. 2) http://codeforces.com/contest/1038 A #include<bits/stdc++.h> us ...
- SSM框架整合过程总结
-----------------------siwuxie095 SSM 框架整合过程总结 1.导入相关 jar 包( ...
- centos7 下安装pycharm
CentOS 7环境下Pycharm安装流程记录: 1.准备安装文件: 方法1: 使用内置火狐浏览器访问下载最新格式为tar.gz的压缩包 网址:https://www.jetbrains.com/p ...
- Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题
Asterisk 11 chan_sip.c: Failed to authenticate device 看不到IP的问题 没有验证过 原文地址 http://www.coochey.net/? ...