2015-02-09
一、登陆界面
1登录实现文本框提示信息,鼠标点击提示信息消失
body中<div id="logindiv">
<table>
<tr><td>
<span id="error2"></span>
</td></tr>
<tr>
<td>用户名:</td>
<td><input id="txname" name="txname" type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input name="txpwd" type="text" id="txpwd" class="input" value="请输入密码" />
<input name="password" type="password" id="password" class="input" style="display:none;" />
</td>
</tr>
<tr>
<td>验证码:</td>
<td><input id="code" type="text" name="code"/></td>
</tr>
<tr>
<td><img id="valiCode" style="cursor: pointer;" src="/Login/GetValidateCode/?id=1" alt="验证码" /></td>
<td><a href="javascript:void(0)" οnclick="ChangeCode(); return false">看不清,换一张</a></td>
</tr>
<tr>
<td><input id="login" type="button" value="登录" /> </td>
<td><input id="register" name="register" type="button" value="注册" οnclick="location.href='/Register/add'" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
script中
$(function () {
//提示输入用户名
$("#txname").val("请输入用户名").focus(function () {
if ($(this).val() == '请输入用户名') {
$(this).val("");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val("请输入用户名");
}
});
//提示输入密码
$("#txpwd").val("请输入密码").focus(function () {
if ($(this).val() == '请输入密码') {
$("#txpwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function () {
if ($(this).val() == "") {
$("#password").hide();
$("#txpwd").show();
}
});
//提示输入验证码
$("#code").val("请输入验证码").focus(function () {
if ($(this).val() == '请输入验证码') {
$(this).val("");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val("请输入验证码");
}
});
});
2.非空验证
script中
if (username == "" || username == null || username == "请输入用户名") {
$("#error2").text("用户名不能为空!");
return false;
}
二、注册常遇问题
1.验证(正则表达式)
①字符限制
$(this).val().length > 5
②6-20位字母数字下划线的组合
var reg1 = /^\w{6,20}$/;
③身份证号
var reg2 = /^([0-9]{15}|[0-9]{18})$/;
④邮箱
var reg3 = /^[a-zA-Z0-9_-]+@@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
用以下方式对比验证:reg1.test($("#username").val(),值为布尔型
三、列表页自动加载
<script type="text/javascript">
$(function () {
var num = 1; //计数器初始化为1
var maxnum = 20; //设置加载最多次数
var pageIndex = 1;
$("#pageIndex").val(pageIndex);
var pageCount=$("#Hidden1").val();
$(window).scroll(function () {
//判断滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight(兼容不同的浏览器)
//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
//console.log("页面的文档高度 :"+$(document).height());
//console.log('浏览器的高度:'+$(window).height());
if (($(document).scrollTop() >= $(document).height() - $(window).height()) && num != pageCount && num!=maxnum) {
$.ajax({
type: "GET",
url: 'Li',
dataType: 'html',
data: { pageIndex: $("#pageIndex").val() },
beforeSend: function () {
$('.ajax_loading').show(); //显示加载提示
},
success: function (data) {
$("#tablelist").append(data);
$('.ajax_loading').hide(); //请求成功,隐藏加载提示
},
error: function (e) {
alert(e);
}
});
num++;
pageIndex++;
$("#pageIndex").val(pageIndex);
}
});
});
</script>