与后台交互常见问题

最新推荐文章于 2023-06-19 09:59:52 发布

anhuang1896

最新推荐文章于 2023-06-19 09:59:52 发布

阅读量190

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/qianduanjingying/p/5471578.html

版权

1、图片的宽度固定。不然出现各种问题。当用户上传大的图片时易出现问题。

2、PC端需要兼容手机端的页面，如果<P>标签的字体大小不受设置的控制，在手机端往往会偏大很多，需要设置P标签的高度为百分比高度，外面的<div>容器的高度伸缩，所以也可以达到伸缩的效果。

3、在P标签中，该断行的时候就断行。不然出现文字跑到屏幕外面去了。

①断行代码，自动换行：

word-wrap: break-word;   //在长单词或 URL 地址内部进行换行。   另外一个值是：normal：只在允许的断字点换行（浏览器保持默认处理）。
word-break: break-all;  //允许在单词内换行。  另外两个值是   keep-all：只能在半角空格或连字符处换行     normal：使用浏览器默认的换行规则。

②另外一种情况是不断行，显示...在后面，可以后天解决这个问题，前端css的解决方案是：

overflow: hidden;
white-space: nowrap;    //white-space属性指定元素内的空白怎样处理。   nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
text-overflow: ellipsis;   //text-overflow属性指定当文本溢出包含它的元素，应该发生什么。   ellipsis:显示省略符号来代表被修剪的文本。

4、input输入框的正确写法应该是给一个和字体大小差不多高度，然后其他的写padding。不然在360浏览器下出现问题。对于placeholder的正确写法应该是针对IE10以下的浏览器做判断，如果低于IE10，则用label的写法，如果高于IE10且等于IE10,则用placeholder属性，遍历每一个input或者是textarea；把label的值赋给placeholder，因为在高级浏览器下面，记住密码的情况下出现label和记住的密码叠在了一起。

placeholder浏览器支持情况：

针对这种情况下，写一段JS程序：

         var lessThenIE9 = (function () {
            var UA = navigator.userAgent,
                isIE = UA.indexOf('MSIE') > -1,
                v = isIE ? /\d+/.exec(UA.split(';')[1]) : 'no ie';
            return v < 10;
        })();   //返回一个boolean值，如果浏览器低于IE10，则为trun，否则是false.
        var labelinput = $('.loginwrap input,.enrollwrap input,#explain');
        if(lessThenIE9){
            labelinput.each(function(i){
                if(this.value === ''){
                    $(this).prev().show();
                }else{
                    $(this).prev().hide();
                }
            });
            labelinput.focus(function(){
                $(this).prev().hide();
            });
            labelinput.blur(function(){
                if(this.value ===''){
                    $(this).prev().show();
                }else{
                    $(this).prev().hide();
                }
            });
        }else{
            labelinput.each(function(i){
                var placeholder = $(this).prev('label').html();
                $(this).prop('placeholder',placeholder);
                $(this).prev('label').hide();
            })
        }

5、在写输入框前面有像下面的图片这样的图标的时候,需要注意：

如果是用背景来做的话，出现的问题是当记住密码或者是双击input时出现问题，导致图片被一层黄绿色的东西盖住了。正确的做法是：使用<img>标签来写这个图标，并且z-index定位在上层，才不会被盖住。

6、first-child的使用：在IE7以上都支持，但是last-child不支持。所以在写很多导航的之后应该使用margin-left,margin-top,border-left,border-top,padding-left-padding-top，以避免增加不必要的class。

7、min-height的使用，在登录首页或者内容不够高的时候非常有用。

具体可以看链接里面的代码：http://sandbox.runjs.cn/show/vvugknsw

min-height浏览器支持情况：

第二条也很重要,IE8 has some bugs with max-width/height combined with overflow: auto/scroll.,

IE8与最大宽度/高度结合溢出导致一些错误：自动/滚动。

8、上传文件或者上传图片的写法：

html:

<div class='fileslist3 clearfix'>
     <input type="text" class="filetext">
     <input type="file" class="files" accept="image/*">
     <a class="filestri" href="javascript:;">选择图片</a>
     <button class="anniu">确定上传</button>
     <strong>支持<em>小于10M</em>的<em>JPG</em>格式图片上传。</strong>
</div>

css:

.files{
    visibility: hidden;  //或者是opacity:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;    //视情况而定
}

javascript:

$('.files').on('change',function(){
    var value = this.value;
    $(this).siblings('.filetext').val(value);
    })
    $('.filestri,.files1aclk').on('click',function(){
    $(this).siblings('.files').trigger('click');
})

9、表单验证：

检测正则和字符串是否匹配函数：

function isValidate (str,regExps) {
   var reg = new RegExp(regExps);
   if (reg.test(str)) {
      return true;
   } else {
      return false;
   }
}

失去焦点验证：

//手机号码
$('.phonenumber').on('blur',function(){
    var phoneval = this.value;
    var regs = /^[1][3,4,5,7,8]\d{9}$/;
    if(!$.trim(phoneval)){
        $(this).next('span').html('手机号码不能为空').show();
    }else if(!isValidate (phoneval,regs)){
        $(this).next('span').html('您输入的手机号码格式不正确').show();
    }else{
        $(this).next('span').hide();
    }
});

表单提交时验证：

       //创建团队
        $('.baomingcg').on('click',function(){
            var $thisInputWrap = $(this).siblings('.inputwrap');
            var $teamname = $('.teamname', $thisInputWrap);
            var $phonenumber1 = $('#phonenumber1');
            var $password = $('.password', $thisInputWrap);
            var $username = $('.username',$thisInputWrap);
            var $birth = $('.birth',$thisInputWrap);
            var $idcard = $('.idcard',$thisInputWrap);
            var $college = $('.college',$thisInputWrap);
            var $email = $('.email',$thisInputWrap);
            var    teamnameval = $teamname.val();
            var    phonenumber1val = $phonenumber1.val();
            var    passwordval = $password.val();
            var    usernameval = $username.val();
            var    birthval = $birth.val();
            var    idcardval = $idcard.val();
            var    collegeval = $college.val();
            var    emailval = $email.val();
            if(!$.trim(teamnameval)){
                $teamname.trigger('blur').focus();
                return false;
            }

            if(!$.trim(phonenumber1val)){
                $phonenumber1.trigger('blur').focus();
                return false;
            }else if(!isValidate(phonenumber1val,/^[1][3,4,5,7,8]\d{9}$/)){
                $phonenumber1.trigger('blur').focus();
                return false;
            }

            if(!$.trim(passwordval)){
                $password.trigger('blur').focus();
                return false;
            }else if(!isValidate (passwordval,/[0-9a-zA-Z_]{6,15}$/)){
                $password.trigger('blur').focus();
                return false;
            }

            if(!$.trim(usernameval)){
                $username.trigger('blur').focus();
                return false;
            }else if(usernameval.length<2){
                $username.trigger('blur').focus();
                return false;
            }

            if(!$.trim(birthval)){
                $birth.trigger('blur').focus();
                return false;
            }else if(!isValidate (birthval,/^(19|20)(\d){2}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/)){
                $(this).next('span').html('出生日期日期格式必须为YYYY-MM-DD').show();
            }

            if(!$.trim(idcardval)){
                $idcard.trigger('blur').focus();
                return false;
            }else if(!isValidate (idcardval,/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/)){
                $idcard.trigger('blur').focus();
                return false;
            }

            if(!$.trim(collegeval)){
                $college.trigger('blur').focus();
                return false;
            }

            if(!$.trim(emailval)){
                $email.trigger('blur').focus();
                return false;
            }else if(!isValidate (emailval,/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/)){
                $email.trigger('blur').focus();
                return false;
            }

            $('#enrollcon1').submit();
        });

常见的正则验证：

var regs = /[^\x00-\xff]/g     //中文字符
var regs = /^[1][3,4,5,7,8]\d{9}$/    //手机号码，在原来的基础上添加了17*********，18*********
var regs = /^[0-9a-zA-Z_]{6,16}$/    //密码长度为6-16位，开头既可以是字母也可以是数字var regs = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ //邮箱验证
var regs = /^(19|20)(\d){2}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/   //出生日期验证，出生日期日期格式必须为YYYY-MM-DD
var regs = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/  //身份证验证

输入文字减少（输入一个中文算一个字符，两个英文算一个字符）：

        var maxlen = 100;
        $('#explain').on('keyup',function(){
            var floorval = Math.floor(this.value.replace(/[^\x00-\xff]/g,"aa").length/2)
            var n = maxlen - floorval;
            document.getElementById('textspan').innerHTML = n <=0 ? 0 : n;
        })

日历选择插件：（兼容性（IE7以上都兼容）和效果都还不错）

http://laydate.layui.com/

检测浏览器是否支持placeholder:

function placeholderSupport() {
    return 'placeholder' in document.createElement('input');
}
if(!!placeholderSupport()){
}else{
    document.getElementById('inp').value = document.getElementById('inp').placeholder;
}

表单提交时使用button或者其他的标签，提交需要设置标签的属性type="submit",不然在IE7下提交不了表单。