先上效果图：
表单的基础内容就是昵称判断、手机号判断、邮箱判断、身份证号码判断，这里是用到正则验证检验格式。
页面的表单写法就是一个form的提交。输入框用input来实现，输入内容用value来获取。每个输入框用唯一的ID名字来标记：
<body><div class="content"><div class="title">用户注册</div><form onsubmit="return false"><div><label><span>*</span>昵称：</label><input onfocus="clearErr()" id="name" type="text" placeholder="只能包含中文、英文、数字和下划线"></div><div><label><span>*</span>手机：</label><input onfocus="clearErr()" id="phone" type="text" placeholder=""></div><div><label>邮箱：</label><input onfocus="clearErr()" id="email" type="text"></div><div><label>身份证号：</label><input onfocus="clearErr()" id="cardCode" type="text"></div><div><label>毕业学校：</label><input onfocus="clearErr()" id="school" type="text"></div><div><button id="registerBtn" type="submit">注册</button></div><div id="errContent"></div></form></div></body>
通过JS来实现输入验证，和正则验证：
<script>window.onload = function(){var oRegisterBtn = document.getElementById('registerBtn');var oName = document.getElementById('name');var oPhone = document.getElementById('phone');var oEmail = document.getElementById('email');var oCardCode = document.getElementById('cardCode');var oschool = document.getElementById('school');var oErrContent = document.getElementById('errContent');oRegisterBtn.onclick = function(){var doRegister = true;var errStr = "";if(!oName.value){errStr += "用户名不能为空</br>";doRegister = false;}else if(/[^\u4e00-\u9fa5\w]/.test(oName.value)){errStr += "用户名格式不对" +"</br>";doRegister = false;}if(!oPhone.value){errStr += "手机号不能为空</br>";doRegister = false;}else if(!/^1[3|4|5|8][0-9]\d{4,8}$/.test(oPhone.value)){errStr += "手机号格式不对</br>";doRegister = false;}if(oEmail.value && !/^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/.test(oEmail.value)){errStr += "邮箱格式不对</br>";doRegister = false;}if(oCardCode.value && !/[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/.test(oCardCode.value)){errStr += "身份证号式不对</br>";doRegister = false;}if(doRegister){//此处写相应的ajax提交alert("您的资料已提交...");}else{oErrContent.innerHTML = errStr;}}}function clearErr(){document.getElementById('errContent').innerHTML = "";}</script>
样式内容也简单贴上吧：
<style>*{margin:0;padding:0;}.content{width:800px;margin:50px auto;}.title{font-size:18px;font-weight:bold;padding-left:340px;margin-bottom:30px;}input{border:1px solid #a9a9a9;height:34px;line-height:34px;width:550px;margin-bottom:20px;padding-left:5px;}label{width:120px;text-align:right;display:inline-block;}#registerBtn{background:#3498db;color:#fff;font-size:14px;text-align:center;width:100px;line-height:34px;border:none 0;cursor:pointer;margin:20px 20px 0 0;margin-left:120px;}label span{color:red;}#errContent{padding:20px 0 0 30px;text-align:center;}</style>
表单验证用到的地方多，也有很多人写过，所以我这里只是用更简洁的方法来实现。同理可以推陈出新很多内容
