手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS简单实现登陆验证附效果图
JS简单实现登陆验证附效果图
摘要:源代码:复制代码代码如下:functionlogin(){varuserName=document.getElementById("user...

源代码:

复制代码 代码如下:

<!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 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"></td>

</tr>

<tr>

<td width="80" height="28" align="left">登录密码</td>

<td><input id="pwd" name="pwd" type="password"></td>

</tr>

<tr>

<td width="80" height="28" align="left">重复输入密码</td>

<td><input id="repwd" name="repwd" type="password"></td>

</tr>

<tr>

<td width="80" height="28" align="left">有效邮箱地址</td>

<td><input id="address" name="address" type="text"></td>

</tr>

<tr>

<>

<td colspan="2">

<input type="submit" value="登录">

<input type="button" value="取消"></td>

</tr>

</table>

</form>

</center>

</body>

</html>

效果实现:

1

【JS简单实现登陆验证附效果图】相关文章:

JS函数实现鼠标指向图片后显示大图代码

JS实现模拟风力的雪花飘落效果

nodejs怎么简单实现中英文翻译

一个很简单的办法实现TD的加亮效果.

JavaScript实现Flash炫光波动特效

JS实现带缓冲效果打开、关闭、移动一个层的方法

JS+CSS实现的拖动分页效果实例

简单实用的网页表格特效

COOL而实用的动态效果

JS实现两表格里数据来回转移的方法

精品推荐
分类导航