1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<script src="js/jquery-1.8.0.min.js"></script> 8 ????<script> 9 ????????var cnresu = false;10 ????????$(function(){11 ????????????$("input[name=‘uname‘]").blur(function(){//blur从链接上移开焦点(鼠标离开框时)12 ????????????????var unamestr = $(this).val();13 ????????????????var regstr = /^[\u4e00-\u9fa5]{2,4}$/;14 ????????????????if(!regstr.test(unamestr)){15 ????????????????????$(this).parent().next("dd").html("必须是2-4个汉字");16 ????????????????????cnresu = false;17 ????????????????????return;18 ????????????????}19 ????????????????cnresu = true;20 ????????????});21 ????????????$("input[name=‘uname‘]").focus(function(){//focus给予链接焦点(鼠标点中框时)22 ????????????????$(this).css("border","solid 1px #dddddd");23 ????????????????//$(this).val("");24 ????????????????$(this).parent().next("dd").html("");25 ????????????});26 ????????});27 ????</script>28 ????<style>29 ????????#home{30 ????????????width: 600px;31 ????????????height: 300px;32 ????????????margin: auto;33 ????????????background-color: #7FFFD4;34 ????????}35 ????????#head{36 ????????????padding-top: 20px;37 ????????????height: 100px;38 ????????}39 ????????.dl1{40 ????????????clear: both;41 ????????}42 ????????.dl1 dt{43 ????????????float: left;44 ????????????text-align: right;45 ????????????width: 150px;46 ????????????height: 30px;47 ????????????line-height: 30px;48 ????????}49 ????????.dl1 dd{50 ????????????float: left;51 ????????????height: 30px;52 ????????????line-height: 30px;53 ????????}54 ????????#foot{55 ????????????text-align: center;56 ????????}57 ????????h1{58 ????????????padding-top: 20px;59 ????????????text-align: center;60 ????????????color: bisque;61 ????????}62 ????</style>63 ????<body>64 ????????<div id="home">65 ????????????<h1>用户登陆</h1>66 ????????????<div id="head">67 ????????????<form action="biaodan.html" name="regform" method="post" >68 ????????????????<dl class="dl1">69 ????????????????????<dt>用户名 : </dt>70 ????????????????????<dd><input type="text" name="uname"/></dd>71 ????????????????????<dd id="erroruname"></dd>72 ????????????????</dl>73 ????????????????<dl class="dl1">74 ????????????????????<dt>密码 : </dt>75 ????????????????????<dd><input type="password"/></dd>76 ????????????????????<dd id="errorpass"></dd>77 ????????????????</dl>78 ????????????</div>79 ????????????????<div id="foot">80 ????????????????????<input type="submit" value="提交"/>81 ????????????????????<input type="reset" value="重置"/>82 ????????????????</div>83 ????????????</form>84 ????????</div>85 ????</body>86 </html>运行截图
用户登陆界面(jquery)
原文地址：http://www.cnblogs.com/a1045417817/p/7479599.html