JS校验与最终登陆界面功能完整示例
本文实例讲述了JS校验与最终登陆界面功能。分享给大家供大家参考，具体如下：
<html>
<head>
<title>注册页面</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
// 校验用户名
function checkUname(){
// 获取用户名对象
var uname=document.getElementById("uname").value;
// 创建校验正则表达式判断条件
var reg=/^[\u4e00-\u9fa5]{2,4}$/; //其中前面的一部分是汉字的正则表达式，后面的是汉字的合法范围,（第一次因为,正则表达式写错了）
// 获取后面的提示字
var nameSpan=document.getElementById("nameSpan"); //span是一个没有特殊含义的自定义标签用来辅助设计
// 进行校验
if(uname=="" || uname ==null){
nameSpan.innerHTML="用户名不能为空";
nameSpan.style.color="red";
return false;
}else if(reg.test(uname)){
nameSpan.innerHTML="用户名合法";
nameSpan.style.color="green";
return true;
}else{
nameSpan.innerHTML="用户名不合法";
nameSpan.style.color="red";
return false;
}
}
function checkPassword(){
// 获取用户名对象
var password1=document.getElementById("pws1").value; //我们是通过对象的value值（文本输入框的内容）进行判断的
// 创建校验正则表达式判断条件
var reg=/^[a-z]\w{4,8}$/; //首位为字母，后面为数字4到8位 ()
// 获取后面的提示字
var pwsSpan=document.getElementById("passwordSpan"); //span是一个没有特殊含义的自定义标签用来辅助设计
// 进行校验
if(password1=="" || password1 ==null){
pwsSpan.innerHTML="*密码不能为空";
pwsSpan.style.color="red";
return false;
}else if(reg.test(password1)){
pwsSpan.innerHTML="*密码合法";
pwsSpan.style.color="green";
return true;
}else{
pwsSpan.innerHTML="*密码不合法";
pwsSpan.style.color="red";
return false;
}
// return password1.value;
checkPassworded(); //在失去焦点的时候(调用该函数时，也进行确认密码的校验)，如果没有这个操作，当重新修改用户密码时，其不会在进行确认密码(即修改密码后即使不相同也不会报错)
}
// 校验确定密码
function checkPassworded(){
// 获取确认密码对象
var password2=document.getElementById("pws2").value;
// 获取第一次密码对象,以进行比较
var password1=document.getElementById("pws1").value;
// 获取提示语的对象
var pwslSpan=document.getElementById("passwordlSpan");
// reg=checkPassword();
// if(reg="" || reg=null) //没能实现
if(password2=="" || password2==null){ //null就是字符串类型，表示空字符串
pwslSpan.innerHTML="*确认密码不能为空";
pwslSpan.style.color="red";
return false;
}else if(password1 == password2){
pwslSpan.innerHTML="*两次密码相同";
pwslSpan.style.color="green";
return true;
}else{
pwslSpan.innerHTML="*两次密码不相同";
pwslSpan.style.color="red";
return false;
}
}
//--------------------------------------------------------------------------------------------------------
// 考虑到有很多的校验方法都用到相同的方法和结构,所以我们在此对其进行封装
function checkAll(id,reg){ //封装的基本思想：相同的直接写入，不同的利用参数转换
//接收传递的对象
var inp=document.getElementById(id); //我们传的参数是带双引号的
var ie=inp.value; //我们通过对象的值进行判断
var alt=inp.alt; //通过对象来获得其对应的一些值
//接收传递的提示框对象
var span=document.getElementById(id+"Span");
if(ie=="" || ie==null){
span.innerHTML=alt+"不能为空";
span.style.color="red";
return false;
}else if(reg.test(ie)){
span.innerHTML=alt+"合法";
span.style.color="green";
return true;
}else{
span.innerHTML=alt+"不合法";
span.style.color="red";
return false;
}
}
// 手机号的校验
function checkPhone(){
return checkAll("phone",/^1[3,4,5,7,8]\d{9}$/);
}
// 邮箱的校验
function checkMail(){
return checkAll("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/);
}
// 添加验证码
function checkCode(){
// 获取验证码填写对象
var code=document.getElementById("code1");
// 获取验证显示对象
var codeSpan=document.getElementById("codeSpan");
var tag=Math.floor(Math.random()*9000+1000); //产生四位的整数，Math.floor表示向下取整，
codeSpan.innerHTML=tag;
}
// 校验验证码
function checkCoded(){
// 获取输入的验证码对象
var code2=document.getElementById("code1").value;
// 获取显示的验证码对象,以进行比较
var codeSpan1=document.getElementById("codeSpan");
var code1=codeSpan1.innerHTML; //通过对象利用其innerHTML属性进行获得，其利用value不正确，没进一步探索
// 获取提示语的对象
var codeSpan2=document.getElementById("codeSpan2");
// alert(code1); //得到的值是undefined
// alert(code2);
if(code2=="" || code2==null){
codeSpan2.innerHTML="*验证码不能为空";
codeSpan2.style.color="red";
return false;
}else if(code1 == code2){
codeSpan2.innerHTML="*验证码相同";
codeSpan2.style.color="green";
return true;
}else{
codeSpan2.innerHTML="*验证码不相同";
codeSpan2.style.color="red";
return false;
}
}
// 校验选择框
function checkSelect(){
// 获取选择框对象
var select=document.getElementById("select").value;
// 获取选择框提示对象
var selectSpan=document.getElementById("selectSpan");
// selectSpan.style.fontSize="15px";
if(select==0){
selectSpan.innerHTML="地址选择不能为空";
selectSpan.style.color="red";
return false;
}else{
selectSpan.innerHTML=select;
selectSpan.style.color="green";
return true;
}
}
// 检测多选框
function checkFav(){
// 获取多选框对象
var fav=document.getElementsByName("fav");
// 获取多选框提示对象
var favSpan=document.getElementById("favSpan");
favSpan.style.fontSize="10px";
for(var i=0;i<fav.length;i++){
if(fav[i].checked){ //fav[i]是一个对象，fav[i].checked是一个值
favSpan.innerHTML="选择成功";
favSpan.style.color="green";
return true; //选择成功后直接返回
}
} //在整个循环结束后都没有进行选择，才进行不符合提示
favSpan.innerHTML="至少选择一个";
favSpan.style.color="red";
return false;
}
function checkAgree(){
// 当同意公司协议的时候才能进行提交操作
document.getElementById("pop").disabled=!document.getElementById("agree").checked;
// 当同意公司协议的时候,对应的submit的对应值是true,所以我们利用!把disabled的值赋值为false
}
function checkSub(){
// 校验是否可以提交
// 对于所有的校验函数,只要有一个不满足条件,就不能提交
checkUname();
checkPassword();
checkPassworded();
checkPhone();
checkMail();
checkCoded();
checkSelect();
checkFav(); //当所有值都为true的时候才能进行提交，所以对应的函数有返回值，不满足时返回false，满足时返回true
return checkUname()&&checkPassword()&&checkPassworded()&&checkPhone()&&checkMail()&&checkCoded()&&checkSelect()&&checkFav();
}
</script>
<style type="text/css">
tr,td,table{
background-color: transparent;
border 0px;
}
span{
font-size: 10px;
}
#codeSpan{
width: 30px;
height: 25px;
font-size: 20px;
color: black;
background-size: 100%,100%; /*后面三行是使背景图片占满整个区域*/
background-repeat: no-repeat;
background-image: url(../img/0.jpg);
}
#selectSpan{
font-size: 15px;
}
#showdiv{
width: 30%;
height: 100%;
background-image: url(../img/5.jpg);
background-size: cover;
background-repeat: no-repeat;
margin-left: 33%;
}
input,select,[type=checkbox],#bigText{
background-color: transparent; /* 把一些边框背景变为透明的以显示背景*/
}
</style>
</head>
<body onload="checkCode(),checkSelect(),checkFav()">
<form action="#" action="get">
<div align="center" id="showdiv">
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr height="29px">
<td width="80px">姓名</td>
<td width="180px">
<input type="text" name="uname" value="" id="uname" onblur="checkUname()"/>
<span id="nameSpan"></span> <!-- 以焦点的有无来进行判断-->
</td>
</tr>
<tr height="29px">
<td width="80px">邮箱</td>
<td width="180px">
<input type="text" name="mail" value="" id="mail" alt="邮箱" onblur="checkMail()"/>
<span id="mailSpan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">手机号</td>
<td width="180px"> <!--查了很长时间的错误，就因为调用的函数没有用""包含，""在外面了-->
<input type="text" name="phone" value="" id="phone" alt="手机号" onblur="checkPhone()"/>
<span id="phoneSpan"></span>
</td>
</tr>
<tr height="31px">
<td width="80px">密码</td>
<td width="180px">
<input type="password" name="psw" value="" id="pws1" onblur="checkPassword()"/>
<span id="passwordSpan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">确认密码</td>
<td width="180px">
<input type="password" name="psw2" value="" id="pws2" onblur="checkPassworded()"/>
<span id="passwordlSpan"></span>
</td>
</tr>
<tr height="31px">
<td>性别</td>
<td>
男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" />
</td>
</tr>
<tr height="31px">
<td>所在地</td>
<td>
<select name="" id="select" onchange="checkSelect()">
<option value="0"></option>
<option value="山东">山东</option>
<option value="北京">北京</option>
<option value="河南">河南</option>
</select>
<span id="selectSpan"></span>
</td>
</tr>
<tr height="31px">
<td>爱好</td>
<td> <!--我们对每一个都进行事件触发检验，因为每个选项都是平等的-->
动漫<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="animation"/>
游戏<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="game" />
打球<input type="checkbox" name="fav" id="fav" onclick="checkFav()" value="ball" />
<span id="favSpan"></span>
</td>
</tr>
<tr height="31px">
<td>个人简介</td>
<td>
<textarea name="introduction" rows="7px" cols="25px" id="bigText"></textarea>
</td>
</tr>
<tr height="31px">
<td width="80px">验证码</td>
<td width="180px">
<input type="password" name="code" value="" id="code1" onblur="checkCoded()"/>
<span id="codeSpan" onclick="checkCode()"></span><br />
<span id="codeSpan2" onclick="checkCoded()"></span>
<!--<a href=""><span id=" rel="external nofollow" codeSpan" onclick="checkCode()"></span></a>--> <!-- 行内显示一定的距离，可以直接用 -->
</td> <!--可以用a标签把鼠标的图标变成一个小手，但是会触发超链接事件，感觉不提倡-->
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="checkbox" name="select" id="agree" value="1" onclick="checkAgree()" />是否同意我们的协议
<!--<input type="radio" name="select" id="agree" value="1" />是否同意我们的协议-->
<!--radio是互斥选择，当只有一个的时候，选中了，就取消不了了，要进行一些处理-->
</td>
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="submit" value="注册" id="pop" disabled="true" onclick="checkSub()"/>
<!--我们可不是所有的情况都可以进行submit-->
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript表单(form)操作技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
使用JavaScript进行表单校验功能
文本框校验 以下是文本框的校验步骤. 1.获取待校验的文本框value值, 2.对value值设置判定条件,使用if语句或switch语句实现. 3. 若满足条件,则校验通过,返回值为true. 4. 若不满足条件则返回值为false,替换文本输出校验的提示信息. 5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件. 6. 在input中调用校验函数,我使用的是onblur事件触发校验函数. 下拉框校验 下拉框的校验相比文本框略有不同,下拉框中option
-
js校验表单后提交表单的三种方法总结
第一种: 复制代码 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); form.userId.focus(); return false; } if(fo
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
JavaScript 完成注册页面表单校验的实例
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验 <!DOC
-
详解AngularJs HTTP响应拦截器实现登陆、权限校验
$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一
-
Angularjs使用指令做表单校验的方法
前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class
-
javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据) 异步校验表单的初衷 提升用户体验 最大化减少网络请求,减轻服务器压力 下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号) 校验工号 复制代码 代码如下: var BASE_PATH = '${rc.contextPath}';
-
jsp登陆校验演示 servlet、login、success
jsp的登录校验Demo part_1:login.jsp:登录页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.ge
-
拦截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
-
Vue.js 表单校验插件
Vuerify 是一个简单轻量的数据校验插件.内置基础的校验规则和错误提示.可自定义规则,规则类型支持正则.函数或者字符串.校验规则可全局注册也可以组件内注册.插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.$errors. 安装 npm i vuerify -S 使用 安装插件 import Vue from 'vue' import Vuerify from 'vuerify' Vue.use(Vuerify, /*
-
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