如题,我用validate来实现验证功能,老大说太难看,让我用ligerTip来美化一下,效果就参照jquery liger ui里面那个表单验证就行了,可我看了半天代码,还是没搞懂他是如何让错误信息进入ligertip中的content中的,在此特来求大神解救..<!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>
<title></title>
<script src="http://localhost:4079/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/base.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/new/ligerTip.js" type="text/javascript"></script>
<link href="http://localhost:4079/js/css/Gray/css/all.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:4079/js/css/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4079/js/new/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/new/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txt1").ligerTip({ content: $("#txt1").val() });
$("#form1").validate({
rules: {
name: "required",
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
emile: {
required: true,
email: true
}
},
messages: {
name: "姓名不能为空",
password: {
required: "密码不能为空",
minlength: "密码应大于5位"
},
password2: {
required: "密码不能为空",
minlength: "密码应大于5位",
equalTo: "重复密码要与密码相同"
},
emile: {
required: "邮件地址不能为空",
emile: "邮件地址不正确"
}
}
})
});
</script>
<style type="text/css">
label.error
{
background: url(images/error.jpg) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
input.error
{
border: outset 1px red;
}
</style>
</head>
<body>
<input id="txt1" type="text" value="sxazaw"/>
<form action="" id="form1">
<table>
<tr><td>姓名</td><td><input name="name" type="text" /></td></tr>
<tr><td>密码</td><td><input id="password" name="password" type="text" /></td></tr>
<tr><td>重复密码</td><td><input name="password2" type="text" /></td></tr>
<tr><td>邮箱</td><td><input name="emile" type="text" /></td></tr>
</table>
<input type="submit" id="xxx"/>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://localhost:4079/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/base.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/new/ligerTip.js" type="text/javascript"></script>
<link href="http://localhost:4079/js/css/Gray/css/all.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:4079/js/css/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4079/js/new/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://localhost:4079/js/new/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txt1").ligerTip({ content: $("#txt1").val() });
$("#form1").validate({
rules: {
name: "required",
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
emile: {
required: true,
email: true
}
},
messages: {
name: "姓名不能为空",
password: {
required: "密码不能为空",
minlength: "密码应大于5位"
},
password2: {
required: "密码不能为空",
minlength: "密码应大于5位",
equalTo: "重复密码要与密码相同"
},
emile: {
required: "邮件地址不能为空",
emile: "邮件地址不正确"
}
}
})
});
</script>
<style type="text/css">
label.error
{
background: url(images/error.jpg) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
input.error
{
border: outset 1px red;
}
</style>
</head>
<body>
<input id="txt1" type="text" value="sxazaw"/>
<form action="" id="form1">
<table>
<tr><td>姓名</td><td><input name="name" type="text" /></td></tr>
<tr><td>密码</td><td><input id="password" name="password" type="text" /></td></tr>
<tr><td>重复密码</td><td><input name="password2" type="text" /></td></tr>
<tr><td>邮箱</td><td><input name="emile" type="text" /></td></tr>
</table>
<input type="submit" id="xxx"/>
</form>
</body>
</html>
$(element).removeAttr("title").ligerHideTip();
$(element).attr("title", lable.html()).ligerTip();
},
success: function (lable) {
var element = $("#" + lable.attr("for"));
$(element).removeAttr("title").ligerHideTip();
}如图: