js简单实现用户注册信息的校验代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户注册</title>
<style type="text/css">
@import "css/userRegister.css";
</style>
</head>
<body id="BODY">
<div id="DIV_FORM">
<form method="post" action="url" >
<table id="TABLE">
<tbody>
<tr>
<td>用户名：</td>
<td>
<input name="username" id="USERNAME" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input name="password" id="PASSWORD" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input name="password2" id="PASSWORD2" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>身份证号：</td>
<td>
<input name="IDNumber" id="IDNUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>电话号码：</td>
<td>
<input name="phoneNumber" id="PHONENUMBER" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td>Email：</td>
<td>
<input name="email" id="EMAIL" type="text" onfocus="showDesc(this)" onblur="checkText(this)"/>
</td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="submit" value="确认提交" />
</td>
</tr>
</tbody>
</table>
<table id="TABLE2" border="0">
<tr><td><span id="username">请输入用户名</span></td></tr>
<tr><td><span id="password">请输入密码</span></td></tr>
<tr><td><span id="password2">请再次输入密码</span></td></tr>
<tr><td><span id="IDNumber">请输入身份证号码</span></td></tr>
<tr><td><span id="phoneNumber">请输入电话号码</span></td></tr>
<tr><td><span id="email">请输入邮箱地址</span></td></tr>
</table>
</form>
</div>
<script type="text/javascript" src="jslib/registerCheck.js">
</script>
</body>
</html>
registerCheck.js
//输入框获得焦点时，显示提示内容
function showDesc(obj)
{
var id= obj.name;
document.getElementById(id).style.display="inline";
}
//输入框失去焦点时检验输入内容是否有效
function checkText(obj)
{
//获取输入框的id值
var id= obj.name;
var text=document.getElementById(id.toString().toUpperCase()).value;
//判断是否为空
if(text.replace(/\s/g, "")=="")
{
document.getElementById(id).innerHTML="输入不能为空";
}
else
{
//组装方法
//取首字母转换为大写,其余不变
var firstChar=id.charAt(0).toString().toUpperCase();
//
var strsub=id.substring(1,id.length);
var strMethod="check"+firstChar+strsub+"()";
var isTrue = eval(strMethod);
if(isTrue)
{
document.getElementById(id).innerHTML="输入有效";
}
}
}
function checkUsername()
{
//只简单的判断用户名的长度
var id = document.getElementById("USERNAME");
var username=id.value;
if(username.length > 10)
{
document.getElementById(id.name).innerHTML = "输入的用户名过长";
return false;
}
else
return true;
}
function checkPassword()
{
var password = document.getElementById("PASSWORD").value;
return true;
}
function checkPassword2()
{
var id=document.getElementById("PASSWORD");
var id2=document.getElementById("PASSWORD2");
var password = id.value;
var password2 = id2.value;
if(password!=password2)
{
document.getElementById(id.name).innerHTML="密码不一致";
return false;
}
return true;
}
function checkIDNumber()
{
var id=document.getElementById("IDNUMBER");
var IDNumber =id.value;
if(IDNumber.length<18||IDNumber.length>19)
{
document.getElementById(id.name).innerHTML="身份证号长度有误";
return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
if(expr.test(IDNumber))
{
document.getElementById(id.name).innerHTML="身份证号不可以全'0'或全'1'";
return false;
}
return true;
}
function checkPhoneNumber()
{
// 利用正则表达式对输入数据匹配
var id=document.getElementById("PHONENUMBER");
var phone = id.value;
//匹配到一个非数字字符，则返回false
var expr = /\D/i;
if(expr.test(phone))
{
document.getElementById(id.name).innerHTML="不能输入非数字字符";
return false;
}
return true;
}
function checkEmail()
{
// 利用正则表达式对输入数据匹配
var id = document.getElementById("EMAIL")
var email = id.value;
//以字母或数字开头，跟上@,字母数字以.com结尾
var expr = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;
if(!expr.test(email))
{
document.getElementById(id.name).innerHTML="输入的邮箱格式有误";
return false;
}
return true;
}
CSS
@charset "utf-8";
/* CSS Document */
#BODY{
text-align:center;
}
#TABLE{
text-align:left;
margin: auto;
float:left;
}
#DIV_FORM{
margin-left:300px;
}
#TABLE2{
text-align:left;
width:150px;
height:150px;
}
#TABLE2 tr
{
height:24px;
}
#TABLE2 span{
display:none;
}
相关推荐
-
原生js验证简洁注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
-
Servlet+JavaBean+JSP打造Java Web注册与登录功能
采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现. 思想基础 JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解. 但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果
-
JavaScript注册时密码强度校验代码
密码强度有4个状态,分别如下图. 无密码状态 密码低级状态 密码中级状态 密码高级状态 实现的代码主要如下: HTML代码 <input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)"> <table border="0" cellpadding="0" cellspacing="0&quo
-
js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码. 为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效
-
JavaScript 完成注册页面表单校验的实例
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验 <!DOC
-
拦截JSP页面，校验是否已登录详解及实现代码
拦截JSP页面,校验是否已登录 最近使用struts2做项目,需要拦截JSP以校验是否已经登,但struts2的过滤器链只能过滤action.后来发现在web.xml里可以直接增加javax.servlet.Filter实现类的过滤器,可以过滤JSP.请看代码 Filter实现类 <span style="font-size:18px;">package com.common; import java.io.IOException; import javax.servlet
-
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
ASP.NET MVC结合JavaScript登录、校验和加密
最近闲来无事给自己写了家庭财务收支管理系统,也就包含支出管理,收入管理和一些统计功能. 先说登录模块,因为涉及GET和POST请求,这些东西都是能被监控和抓取的所以就考虑这使用RSA加密解密方式传输用户名和密码参数,页面JS如下: /*需要引入三个JS文件,BigInt.js.RSA.js和Barrett.js,用到cookie则需要引入jquery.cookie.js文件*/ //与后台交互获取公钥 function getPublicKey() { var pubKey = ''; if (
-
Angular.js与node.js项目里用cookie校验账户登录详解
前言 最近的新项目中,用户登录需要采用cookie来记住用户,校验身份.所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习. 在header中携带authId登录 在之前老的项目里,没有采用cookie来记录用户登录状态,而是在请求的header中携带一个身份标识来校验,大致方案如下: 客户端使用post请求提交user.password给服务端进行登录操作: 服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如l