IE8 placeholder兼容+Password兼容

对于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请求后台数据
             }
         })
View Code

 

posted on 2016-07-15 12:27  UnLike  阅读(268)  评论(0编辑  收藏  举报

导航