新闻项目登录页面表单验证

目录

  1. 登录页面展示

  2. 代码解析

  3. 表单验证方法别图片展示


                               1. 这是我们新闻项目的登录页面



 2.1 登录页面主要由用户,密码,验证码组成  这是登录页面的整体框架代码

<body onload="yz()">

	<div id="login">

		<div id="top">
			<div id="top_left">
				<img src="images/login_03.gif" />
			</div>
			<div id="top_center"></div>
		</div>

		<div id="center">
			<div id="center_left"></div>
			<div id="center_middle">
			<form action="admin.jsp" onsubmit="return login_yz()">
				<div id="user">
					用 户 <input type="text" id="uname" name="textfield" />
				</div>
				<div id="password">
					密 码 <input type="password" id="upwd" name="textfield2" />
				</div>
				
				<div id="yzm">
					验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
					<span id="syzm" onclick="yz()"></span>
				</div>
				<div id="btn">
					<input type="submit" value="登录">
					<input type="reset" value="清空">
				</div>
			</form>
			</div>
			<div id="center_right"></div>
		</div>
		<div id="down">
			<div id="down_left">
				<div id="inf">
					<span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
						2008 v2.0</span>
				</div>
			</div>
			<div id="down_center"></div>
		</div>

	</div>
</body>

2.2设置验证码时可删除一些相似的字母,便于操作

    var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
    function yz() {
        //随机出4个0-字符串长度之间的数字 做为下标
        yzmStr="";
        for(var i=1;i<=4;i++){
            yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
        }
        //把验证码赋值到页面
        document.getElementById("syzm").innerHTML=yzmStr;
    }

2.3  获取验证码:判断和电脑的验证码是否相等
      实现了输入的验证码不区分大小写-大小写转换

         var yzm = $("uyzm").value;
        if(yzm!=yzmStr){
            alert("验证码输入错误,请重新输入");
            //清空输入的验证码
            $("uyzm").value="";
            //重新生成验证码
            yz();
            return false;

2.4 验证 用户名 和 密码不能为空

function login_yz() {
        //获取用户名
        var uname = $("uname").value;    
        if(uname.length==0){
            alert("用户名不能为空");
            return false;
        }
        //获取密码
        var upwd = $("upwd").value;
        if(upwd.length==0){
            alert("密码不能为空");
            return false;
        }


3.由于表单验证的限制,用户名,密码,验证码输入为空时,不可登录,且有弹框提醒 

且验证码大小写须一致 

 

 

 


 

 

 

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

隔竹观尘世

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值