jquery-手动验证-非插件-案例4

来源：互联网发布：淘宝开店版权怎么写编辑：程序博客网时间：2024/04/28 08:35

html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>吕老师视频-http://www.tudou.com/home/xuexi158</title>
<link href="css/jquery007.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="js/jquery007.js" type="text/javascript"></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="jquery006.html">
<table width="450" border="1" align="center">
    <tr>
      <td colspan="2">用户名信息:</td>
    </tr>
    <tr>
      <td>用户名:</td>
      <td><label>
        <input type="text" name="uname" id="uname" class="red" />
      </label></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="upass" id="upass" class="red" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" name="button" id="button" value="按钮" /></td>
    </tr>
</table>
</form>
</body>
</html>
js文件:

// JavaScript Document
//页面加载完成后开始做验证工作
$(document).ready(function(){
//定位用户名用ID选择器的方式定位
var uname = $("#uname");
//定位密码
var upass = $("#upass");

//开始验证内容的合法性
//用户名验证：光标从控件离开时立即验证
uname.keyup(function(){
    //获取用户名的值
    var unameval = uname.val();
    if(unameval==""){
        //给边框变成红色
        uname.addClass("red");
        alertMsg(uname,"用户名不能为空")    ;
    }else{
        uname.removeClass("red");
        //异步验证方式请等下回讲解......
    }
}
);
//密码验证
upass.keyup(function(){
    //得到密码的值
    var upassval = upass.val();
    var reg = /[/W]/gi;//只能是数字和英文
    if(reg.test(upassval)){
        //给边框变成红色
        upass.addClass("red");
        alertMsg(uname,"只能输入数字和英文")    ;
    }else{
        upass.removeClass("red");
    }
}
);

}
);
//用弹出层的方式显示消息
function alertMsg(element,msg){
    var msgDiv = document.createElement("div");//创建层元素
    msgDiv.id = "msgDiv";//给元素添加id属性名称
    document.body.appendChild(msgDiv);//文档中加入这个层
    var offset = $(element).offset();//得到指定元素的位置
    var div = $("#msgDiv");
    div.empty();//给消息层先清空
    div.append(msg);//给消息层加入指定的内容
    //给消息层添加样式
    div.css("border","2px solid red")
    .width("150px")
    .css("position","absolute")
    .css("background-color","#CCCCCC")
    .css("color","black")
    .css("z-index","110");
    div.css("left",offset.left+"px").css("top",offset.top+div.height()+"px").css("display","none");
    div.fadeIn("slow");
    //显示时间2秒
    setTimeout(function(){div.fadeOut("slow");},2000);
}

css文件:

/* CSS Document */
.red{
border-color:#FF0000;
}
初学者重点要掌握jquery获得页面上元素的方式.以及如何修改页面元素的样式.

同时和插件方式验证的对比阅读......