与后台交互常见问题
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以上都兼容）和效果都还不错）
检测浏览器是否支持placeholder:
function placeholderSupport() { return 'placeholder' in document.createElement('input'); } if(!!placeholderSupport()){ }else{ document.getElementById('inp').value = document.getElementById('inp').placeholder; }
表单提交时使用button或者其他的标签，提交需要设置标签的属性type="submit",不然在IE7下提交不了表单。
<button type="submit"></button>
