一般在中国，电话号码是区号-7到8位数字的电话号码，所以正则表达式书写如下：
^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}
完整的演示例子如下：
1、html5中的tel标签：
<input type="tel" name="tel" id="tel" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}">
2、或者
<input type="tel" name="tel" id="tel" required onblur="checkme(this)"/>
function checkme(obj){
var val=obj.value()
var mobilevalid = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/
if (!mobilevalid.test(val)) {
alert('请输入正确的手机号码！')
return false
}
}
代码（可以根据自己需要微调）：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>员工信息登记表</title>
<style>
body{
background-color: #FFC0CB
}
input{
margin-left: 30px
}
</style>
</head>
<body>
<h1 align="center">员工信息登记表</h1>
<form action="" method="">
用户登录名：<input type="" placeholder="wcz@163.com" style="margin-left: 15px"/><br />
真实姓名：<input type="" placeholder="王传智"/>(必须添，只能输入汉字)<br />
真实年龄：<input type="" placeholder="24"/>(必添)<br />
出生日期：<input type="" placeholder="年 /月/日"/>(必添)<br />
电子邮箱：<input type="" placeholder="123456@126.com"/>(必添)<br />
身份证号：<input type=""/>(必添，能够以数字、字母x结尾的短省份证号)<br />
手机号码：<input type=""/>(必添)<br />
幸运颜色：<input type="" style="background-color: blackwidth: 100px" />(请选择你喜欢的颜色)<br /><br />
<input type="button" value="提交" style="margin-left: 90pxwidth: 80px" />
<input type="reset" value="重置" style="margin-left: 80pxwidth: 80px"/>
</form>
</body>
</html>
效果展示：
1、拨打电话其实就是一些只有手机支持的标签，<a href="tel:电话号码">点击通话</a>
2、邮件是：
<a class="c" href="mailto:邮件地址">发送邮件</a>
3、地图就是与正常浏览器看的地图是一样的，真的是一样的。
这些都是HTML5新的标签新的支持。
推荐读一本比较新的关于html5、css3的书，会比较详细的了解。
我读了《响应式web设计 html5和css3实战》，有不少收获，但需要有一定html与css基础才更适合阅读。
