对于placeholder兼容问题 IE系列的大部分不兼容
使用JQ插件解决这个问题，确实用法很简单
jS下载地址http://www.ijquery.cn/js/jquery.placeholder.min.js
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.placeholder.min.js"></script>
<script type="text/javascript">
$(function(){ $('input, textarea').placeholder(); });
</script>
后续，placeholder引发的一系列问题
谨慎：早期的placeholder.min.js可能对Password输入框不支持，
很多人都困惑对Password的解决办法，下面分享一些利用placeholder.min.js+validate.js的一套验证demo
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/Jquery.validate.expand.js"></script>
<script src="~/Scripts/jquery.placeholder.min.js"></script>
$("#Form").validate({
ignore: "",
rules: {
Name: { required: true, rangelength: [4, 20],chrnum: true,CheckUserName:true },
Password: { required: true, rangelength: [4,20] },
Newpassword: { equalTo: '#Password',rangelength: [4,20] },
Mobile: { required: true,rangelength: [5, 15],digits:true,CheckPhone:true },
check: { required: true}
},
messages: {
Name: { required: "账号名称不能为空", rangelength: "请输入4-20个字母、数字组合",chrnum:"请输入4-20个字母、数字组合",CheckUserName:"该账号已被注册" },
Password: { required: "密码不能为空", rangelength: "请输入4-20个字" },
Newpassword: { equalTo: "两次密码输入不一致",rangelength: "请输入4-20个字" },
Mobile: { required: "请输入联系电话",rangelength:"请输入5-15个字",digits:"请输入有效数字",CheckPhone:"该联系号码已被使用" },
check: {required:"请选择复选框"}
},
//对radio或checkbox的扩展
errorPlacement: function (error, element) { //指定错误信息位置
if (element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) {
//ajax请求后台数据
}
})