摘要:本篇jQuery教程探讨了如何利用jQuery实现登录验证,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
1.1简单介绍
登录验证是每个网站和系统必不可少的功能,而针对登录验证的方式有很多,现在将我做的登录验证的效果及代码思路写出来给大家参考。
1.2效果图展示
1.3HTML结构布局<div class="loginbody">
<span class="systemlogo">XXXXXXX系统标题</span>
<div class="loginbox">
<form id="loginform" action="/api/user/findUser">
<ul>
<li style="margin-bottom:5px;font-size:16px;color:red;text-left;"></li>
<li><input class="loginuser" id="userAcound" name="userAcound" value="" type="text" placeholder="请输入用户名" /></li>
<li><input class="loginpwd" id="userPwd" name="userPwd" value="" type="password" placeholder="请输入密码" /></li>
<li>
<button id="loginbtn" type="button" class="loginbtn" style="width:97px">登录</button>
<label><input id="login_cbx" name="flag" type="checkbox" value="ok" />记住密码</label><label><a href="#">忘记密码?</a></label>
</li>
</ul>
</form>
</div>
</div>
1.4JS验证实现代码
<!-- 底部加载js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var isBoolean = false;
$('#loginbtn').click(function() {
//判断用户不能为空
if($("input[name='userAcound']").val()!=""){
isBoolean=true;
}else {
//jQuery的attr获取placeholder属性值并改变
$(".loginuser").attr('placeholder', '请输入用户名').attr("id", "myInput");
$(".loginuser").focus();
isBoolean=false;
}
//判断用户不能为空
if($("input[name='userPwd']").val()!=""){
isBoolean=true;
}else {
//jQuery的attr获取placeholder属性值并改变
$(".loginpwd").attr('placeholder', '请输入密码').attr("id", "myInput");
$(".loginpwd").focus(); //取得当前文本框的焦点
isBoolean=false;
}
//提交数据
if(isBoolean == true){
document.getElementById("loginform").submit(); //验证通过后提交
}
});
</script>
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号