jquery实现用户登陆界面(示例讲解)
更新时间：2017年09月06日 08:06:11 作者：烟花盛典
下面小编就为大家带来一篇jquery实现用户登陆界面(示例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实例如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
var cnresu = false;
$(function(){
$("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时)
var unamestr = $(this).val();
var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
if(!regstr.test(unamestr)){
$(this).parent().next("dd").html("必须是2-4个汉字");
cnresu = false;
return;
}
cnresu = true;
});
$("input[name='uname']").focus(function(){//focus给予链接焦点(鼠标点中框时)
$(this).css("border","solid 1px #dddddd");
//$(this).val("");
$(this).parent().next("dd").html("");
});
});
</script>
<style>
#home{
width: 600px;
height: 300px;
margin: auto;
background-color: #7FFFD4;
}
#head{
padding-top: 20px;
height: 100px;
}
.dl1{
clear: both;
}
.dl1 dt{
float: left;
text-align: right;
width: 150px;
height: 30px;
line-height: 30px;
}
.dl1 dd{
float: left;
height: 30px;
line-height: 30px;
}
#foot{
text-align: center;
}
h1{
padding-top: 20px;
text-align: center;
color: bisque;
}
</style>
<body>
<div id="home">
<h1>用户登陆</h1>
<div id="head">
<form action="biaodan.html" name="regform" method="post" >
<dl class="dl1">
<dt>用户名 : </dt>
<dd><input type="text" name="uname"/></dd>
<dd id="erroruname"></dd>
</dl>
<dl class="dl1">
<dt>密码 : </dt>
<dd><input type="password"/></dd>
<dd id="errorpass"></dd>
</dl>
</div>
<div id="foot">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</div>
</form>
</div>
</body>
</html>
运行截图
以上这篇jquery实现用户登陆界面(示例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery实现向下滑出的平滑下拉菜单效果的方法,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
this指的是javascript对象而$(this)就是就jquery对象，不懂的朋友可以看看本文2013-09-09
在本篇文章里小编给大家整理的是一篇关于jQuery冲突问题解决方法，有兴趣的朋友们可以学习下。2021-01-01
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
本文介绍Jquery下的Ajax调试方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法2013-12-12
html、css和jquery相结合实现简单的进度条效果实例代码
这篇文章主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码，这个进度条特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行了，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了jquery通过load获取文件的内容并跳到锚点的方法,涉及load及animate等方法的使用技巧,需要的朋友可以参考下2015-01-01
经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，有需要的小伙伴可以参考下。2015-06-06
本文主要介绍jQuery文件上传控件 Uploadify的用法，原作者做了非常详细的备注，有需要的朋友可以参考一下。2016-06-06
谓的链式调用无非是一个语法技巧而已，我就学Jquery写了一个粗浅的库。2010-05-05
最新评论