js登录与注册验证

妖狐艹你老母 2022-08-24 11:59 259阅读 0赞

**经常写js验证，感觉很麻烦，这次就把他整理贴出来，以后可以直接用了。具体介绍这里不罗嗦了，直接贴代码，相信大家都能理解代码的含义**

登录验证：

Jsp页面代码：

<form action="userLogin.action" method="post" οnsubmit="return login();" id="loginForm">
    	<h3>用户登录</h3>
    	<br /> 用 户 名：<input type="text" name="user.username" id="uName" style="height: 30px;width: 220px;font-size: 20px;" /><br />
    	<br /> 密    码：<input type="password" name="user.password" id="uPass" style="height: 30px;width: 220px;font-size: 20px;" /><br />
    	<br /> <input type="submit" value="登录" style="height: 30px;width: 60px;font-size: 20px;" />     
                   <input type="reset" value="重置" style="height: 30px;width: 60px;font-size: 20px;" />
     </form>

js验证代码：

function login() {
    	// console.info("点击了登录");
    	var userName = $("#uName").val();
    	// console.info(userName)
    	var userPass = $("#uPass").val();
    	// console.info(userPass);
    	if (userName == "" || userName == null) {
    		alert("用户名不能为空");
    		return false;
    	} else if (userPass == "" || userPass == null) {
    		alert("密码不能为空");
    		return false;
    	} else {
    		return true;
    	}
    }

注册验证：

JSP页面代码：

<span style="white-space:pre">				</span><form action="userRegister.action" method="post" οnsubmit="return register();">
    					<h3>用户注册</h3>
    					<table>
    						<tr>
    							<td style="text-align: right;width: 200px;line-height: 50px;">用 户 名<font
    								color="red">*</font>：
    							</td>
    							<td><input type="text" name="user.username"
    								οnblur="return checkname()" id="uName"
    								style="width: 220px;font-size: 16px;" /></td>
    							<td id="namets"
    								style="width: 150px;height:40px;text-align: left;font-size: 12px;"></td>
    						</tr>
    						<tr>
    							<td style="text-align: right;line-height: 50px;">密    码<font
    								color="red">*</font>：
    							</td>
    							<td><input type="password" id="uPass" name="user.password"
    								οnblur="return checkpass();"
    								style="width: 220px;font-size: 16px;" /></td>
    							<td id="passts"
    								style="width: 150px;text-align: left;font-size: 12px;"></td>
    						</tr>
    						<tr>
    							<td style="text-align: right;line-height: 50px;">确认密码<font
    								color="red">*</font>：
    							</td>
    							<td><input type="password" name="" id="uRPass"
    								οnblur="return checkrpass();"
    								style="width: 220px;font-size: 16px;" /></td>
    							<td id="passrts"
    								style="width: 150px;text-align: left;font-size: 12px;"></td>
    						</tr>
    						<tr>
    							<td style="text-align: right;line-height: 50px;">邮    箱<font
    								color="red">*</font>：
    							</td>
    							<td><input type="text" name="user.email" id="uEmail"
    								οnblur="return checkemail();"
    								style="width: 220px;font-size: 16px;" /></td>
    							<td id="emailts"
    								style="width: 150px;text-align: left;font-size: 12px;"></td>
    						</tr>
    						<tr>
    							<td></td>
    							<td style="text-align: center;line-height: 55px;width:220px"><input
    								type="submit" value="注册"
    								style="width: 60px;font-size: 16px;" />         <input
    								type="reset" value="重置"
    								style="width: 60px;font-size: 16px;" /></td>
    						</tr>
    					</table>
    				</form>

js验证代码：

function register() {
    	if(!checkname()){
    		return false;
    	}else if (!checkpass()) {
    		return false;
    	} else if(!checkemail()){
    		return false;
    	} 
    	return true;
    }

function checkname()	
    {
    	var name = document.getElementById("uName").value;	
    	var ts = document.getElementById("namets");
    	if(name.length<3|| name.length>15)	
    	{	
    	    ts.innerHTML ="用户名长度须在3-15之间!";
    	    ts.style.color="red";
    	    return false;
    	}
    	$.post("checkUserName.action", {" userName": name },function(data){
    		var d = $.parseJSON(data);
    		//console.log(d.success);
    		if(d.success!=true){
    			ts.innerHTML ='用户名已存在!';
    			ts.style.color='red';
    			 return true;
    		}
    	});
    	ts.innerHTML ='用户名可以使用！';
    	ts.style.color='green';
    	return true;
    }
    function checkpass(){
    	var userPass = $("#uPass").val();
    	
    	var pts = document.getElementById("passts");
    	
    	if(userPass.length<6 || userPass.length >15)	
    	{	
    		pts.innerHTML ="密码长度须在6-15之间!";
    		pts.style.color="red";
    	    return false;
    	}
    	pts.innerHTML ="密码可以使用!";
    	pts.style.color="green";
    	return true;
    }
    function checkrpass(){
    	var userPass = $("#uPass").val();
    	var userRPass = $("#uRPass").val();
    	var prts =  document.getElementById("passrts");
    	if (userPass != userRPass) {
    		prts.innerHTML="两次密码输入不一致!";
    		prts.style.color="red";
    		return false;
    	}
    	prts.innerHTML ="输入一致!";
    	prts.style.color="green";
    	return true;
    }
    function checkemail(){
    	var userEmail = $("#uEmail").val();
    	var ets = document.getElementById("emailts");
    	if(!isEmail(userEmail)){
    		ets.innerHTML ="邮箱格式不正确!";
    		ets.style.color="red";
    		return false;
    	} 
    	ets.innerHTML ="邮箱可以使用!";
    	ets.style.color="green";
    	return true;
    }
    function isEmail(str){
        var reg = /[a-z0-9-]{1,30}@[a-z0-9-]{1,65}.[a-z]{3}/;
        return reg.test(str);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot+Vue 登录（含验证码）、注册功能

一、初始化项目参考下面文章，初始vue项目并且引入ElementUI组件 [网页制作神器—ElementUI（小白入门超详细）][ElementUI] 并且参考[基

ゞ浴缸里的玫瑰/ 2023年10月15日 08:05/ 0 赞/ 85 阅读

相关 cookie与登录注册

cookie 1. cookie是什么？ cookie是浏览器访问服务器后，服务器会返给浏览器的一段数据。浏览器会保存这段数据。当浏览器再次访问服务器时，浏

小咪咪/ 2023年06月11日 14:24/ 0 赞/ 30 阅读

相关手写邮箱获取验证码注册登录功能！！！

找回密码的困扰自己做了一个博客网站，有登录注册功能，但是没有找回密码功能，思考了许久，发现可以通过第三方来实现，第一想到的就是通过短信验证码，但是资金问题，一条0.1元，

傷城~/ 2022年12月26日 15:30/ 0 赞/ 239 阅读

相关使用localStorage实现注册和登录验证功能

\\ > 今天来用HTML5的localStorage本地存储实现一个注册和登录功能，注册的用户可以保存到网站中，没有注册的用户则无法登录。注册时如果有重名时则不能注册，必须

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 01:49/ 0 赞/ 352 阅读

相关 js登录与注册验证

经常写js验证，感觉很麻烦，这次就把他整理贴出来，以后可以直接用了。具体介绍这里不罗嗦了，直接贴代码，相信大家都能理解代码的含义登录验证： Jsp页面代码： <

妖狐艹你老母/ 2022年08月24日 11:59/ 0 赞/ 260 阅读

相关 ajax请求验证登录名是否已注册

问题提出：利用ajax请求来验证注册时选择的登录名是否已经被注册，问题是每次都会出现未注册，即使是数据库中已经存在有此登录名。后台程序： @RequestM

水深无声/ 2022年08月05日 19:29/ 0 赞/ 186 阅读

相关 Ionic+AngularJS登录和注册带验证

登录： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁借莪１个温暖的怀抱￠/ 2022年07月12日 03:52/ 0 赞/ 209 阅读

相关 JS之单页面登录注册

> 实现思路：通过js控制display的none和block 1：html <div class="form"> <!--1：切换登录

曾经终败给现在/ 2022年05月10日 01:44/ 0 赞/ 239 阅读

相关 ssm项目（三）登录验证/注册

登录验证一：jsp <table align="center" border="1" cellpadding="10"> <tr> <th

Bertha 。/ 2022年05月06日 12:00/ 0 赞/ 247 阅读

相关使用node.js做一个简单的登录注册以及邮箱验证

server服务端需要安装的几个插件 1. npm init --yes 2. npm i express 3. npm i nodemailer 4. node

墨蓝/ 2022年04月12日 03:59/ 0 赞/ 276 阅读