JS简单实现登陆验证附效果图

源代码：


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="刘江波">
<script type="text/javascript">
function login(){
var userName=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
var repwd=document.getElementById("repwd").value;
var address=document.getElementById("address").value;
var matchResult=true;
if(userName==""||pwd==""||repwd==""||address==""){
alert("请确认是否有空缺项！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用户名长度应在6到20个字符之间！");
matchResult=false;
}else if(userName==pwd||userName==repwd){
alert("密码或重复密码不能和用户名相同！");
matchResult=false;
}else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){
alert("密码或重复密码长度应在6到20个字符之间！");
matchResult=false;
}else if(pwd!=repwd){
alert("密码和重复密码不同，请重新输入！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用户名长度应在6到20个字符之间！");
matchResult=false;
}

if(matchResult==true){
var mailreg = /^\w+@\w+(\.\w+)+$/;
if(!address.match(mailreg)){
alert("邮箱格式不正确");
matchResult=false;
}
}

if(matchResult==true){
if(userName.charAt(0)>=0&&userName.charAt(0)<=9){
alert("用户名不能以数字字符开始！");
matchResult=false;
}
}

return matchResult;
}
</script>
<title>用户注册及验证</title>
</head>

<body>
<center>
<form name="loginForm" action="http://www.ytu.edu.cn" onsubmit="return login()" method="post">
<table bgcolor="#6666FF" width="300" cellspacing="0" cellpadding="0" border="0" align="left" valign="top">
<tr>
<td class="table-title" colspan="2" align="center" bgcolor="#3366FF">用户注册</td>
</tr>
<tr>
<td width="130" height="28" align="left">登录用户名</td>
<td><input id="userName" name="userName" type="text" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">登录密码</td>
<td><input id="pwd" name="pwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">重复输入密码</td>
<td><input id="repwd" name="repwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">有效邮箱地址</td>
<td><input id="address" name="address" type="text" class="input"></td>
</tr>
<tr>

<!--<td width="10" height="28" align="left"></td>-->
<td colspan="2">
<input type="submit" value="登录">
<input type="button" value="取消" onClick="reset()"></td>
</tr>
</table>
</form>
</center>

</body>
</html>

效果实现：

赞 (0)

相关推荐

  • jQuery的cookie插件实现保存用户登陆信息

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>cookies.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this i

  • struts2+jquery实现ajax登陆实例详解

    文本仪一个实例讲述了struts2+jquery实现ajax登陆的实现方法,具体步骤如下: 一.新建一个web项目,取名test.配置好struts2的环境,并导入Jquery的js文件到该项目. 二.在com.action包下,新建一个loginAction.java loginAction.java的代码如下 package com.action; import org.apache.struts2.convention.annotation.Action; import org.apach

  • 使用jQuery插件创建常规模态窗口登陆效果

    使用jQuery插件创建常规模态窗口登陆效果

     隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中. 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口.如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当

  • Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

    当session过期后可以用过滤器来设置重定向页面 复制代码 代码如下: public class ActionFilter extends HttpServlet implements Filter {private FilterConfig filterConfig;public void init(FilterConfig config) {this.filterConfig = config;}public void doFilter(ServletRequest servletRequ

  • 将jQuery应用于login页面的问题及解决

    最近在学习和试用jquery,感觉它的ajax和ashx发回json简直是完美的结合,如果我们可以在Form验证时使用这种方式,则login页面几乎就可以达到简洁的极致了.在login页面中使用jquery的ajax回叫ashx验证用户名和密码,然后转向其他页面.初步验证,在ashx中手工构造登录票据,然后返回给login端,是可以完成登录的. 然后接下来,就是在login.aspx页面中引入jquery,将jquery放在lib目录下,将user.ashx放在services目录下,在logi

  • jquery实现界面无刷新加载登陆注册

    jquery实现界面无刷新加载登陆注册

    官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面 1这里是html内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

  • jQuery+Pdo编写login登陆界面

    jQuery+Pdo编写login登陆界面

    Jquery是继prototype之后又一个优秀的Javascript库.而且它是轻量级的js库.共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读).这两个版本都可从 jQuery.com 下载.所以开发学习建议使用压缩的. 当然啦,除了直接下载jquery.js文件外,还可以在html头中插入Google或者Microsoft的CDN来在网页加载时直接从网上获取库文件支持. 使用 Google 的 CDN: <head> <script type=

  • jQuery登陆判断简单实现代码

    复制代码 代码如下: <script src="jquery-1.9.1.js"></script> <script type="text/javascript"> $('#txtUserName').focus(function () { $('#txtUserName').val(''); }) $('#txtPassWord').focus(function () { $('#txtPassWord').val(''); }

  • httpclient模拟登陆具体实现(使用js设置cookie)

    httpclient模拟登陆(使用js设置cookie) 复制代码 代码如下: <html> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <link rel=stylesheet type=text/css href='/bbs.css'> <script>document.cookie='utmpnum=51;path=/;domain=.' + window.l

  • ExtJs 表单提交登陆实现代码

    1 在子类中添加单击提交事件 复制代码 代码如下: //登陆按钮单击事件 loginFun: function() { var f = Ext.getCmp("loginForm"); //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: "请稍候", waitMsg: '正在登陆...', url: 'http://www.cnblogs.com/Service/SystemService/SystemSe

随机推荐