星期三 阴雨 23～26℃

input type="submit" 文字垂直居中的例子

今天调一个<input type="submit">在多浏览器兼容文字垂直居中花了不少时间，记录一下。

• 宽度在 ie6/ie7 下会比较宽，所以加了 width 限定宽度；
• padding-bottom 是针对 ff 和 opera 的；
• line-height 是针对 ie 的（注意比 height 少 1px）；
• font-family 使用“宋体”可以提高 1px 的精度（针对 ff）。

<style type="text/css">
.btn { border:1px solid #3b9808; display:inline-block; padding:1px }
.btn input { cursor:pointer; width:180px; font-family:"\5b8b\4f53"; background:transparent; padding-bottom:2px; border:0; height:32px; line-height:31px; font-size:14px; color:#fff; font-weight:bold; background:url(/static/images/btn.png) repeat-x top }
.btn input:hover { background-position:bottom }
</style>
<span class="btn"><input type="submit" value="同意以下协议并注册" /></span>

效果：

js判断手机号码，jQuery ajax 同步获取返回值

<script type="text/javascript">
function checkReg(goNewPage) {
 var regNoteTxt = document.getElementById("regNoteTxt");
 var vcLoginName = document.getElementById("vcLoginName");
 var checkPhone = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|14\d{9}|15\d{9}|18\d{9}$/;
 //要判断前三位的话可以类似这样写（15开头只允许158/159）：15[89]\d{8}（说明：后面的{8}表示前3位 加 后8位，共11位）
 if(vcLoginName.value==""){
  regNoteTxt.innerHTML = "请输入手机号";
  return false;
 }else if(vcLoginName.value.length < 11 || !vcLoginName.value.match(checkPhone)){
  regNoteTxt.innerHTML = "手机号码格式有误，是11位数字，且是以13，14，15，18开头。";
  return false;
 }else{
  var tempNum; //先在 $.ajax 外定义一个变量
  //使用 jQuery 返回字符串，这里注意，不要使用 $.get  要使用 $.ajax 并把 async 设为 false
  //返回的字符串格式：“F该手机号码已被注册” 或 “T该手机号码可用于注册”
  $.ajax({async:false, url:"/checkContactNumberAjax?vcContactNumber="+vcLoginName.value, success:function(result){
   tempNum = result;
  }});
  //不要把下面的判断写在 $.ajax 的回调函数内，否则 return false 会无效
  if(tempNum.substr(0,1) == "F"){
   //该手机已被注册
   regNoteTxt.innerHTML = tempNum.substr(1);
   return false;
  }else{
   //该手机可以注册，用goNewPage参数区分，分别供onsubmit和onblur调用，如果是提交表单，则不需要return false;
   if (goNewPage != 1) {
    regNoteTxt.innerHTML = "<span style=’color:green’>"+tempNum.substr(1)+"</span>";
    return false;
   }
  }
 }
}
</script>
<form action="/quickRegister" method="post" onsubmit="return checkReg(1)">
 <input type="text" name="phoneNum" id="phoneNum" maxlength="11"  onblur="checkReg(0);" />
<div id="regNoteTxt" class="regNoteTxt">&nbsp;</div>
 <input type="submit" value="提交" />
</form>

参考：

• js验证手机号码格式
• jquery中的return false不起作用

2011-11-25 更新：

发现用 async:false 会有一个问题，在点击时页面会卡住一会，直到数据返回。下面这个方法更科学，把执行代码写在回调函数内：

$.ajax({url:"/checkContactNumberAjax?vcContactNumber="+vcLoginName.value, success:function(result){
 //把代码写在回调函数内
 if(result.substr(0,1) == "F"){
  …
 }
}});

2011-12-31 更新：

发现 form 提交仍然要使用 async:false，否则 return false 会无效。

MeYoung

完善“快速注册页”。

友吧今天

隐去“活跃会员”，“热门话题”下移，重新显示“每日阅读”。（版本号：sports index v2.3.1）