<p class="pall"> <p id="titles">新用户注册</p> <p id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action="#" onsubmit="return checkform()"> <p id="form-itemgroup"> <label for="username">用户名：</label> <input type="text" id="username" class="username" onblur="checkusername()" oninput="checkusername()"> <span class="default" id="nameerr">请输入至少3位的用户名</span> </p> <p id="form-itemgroup"> <label for="userpasword">密码：</label> <input type="password" id="userpasword" class="username" onblur="checkpassword()" oninput="checkpassword()"> <span class="default" id="passworderr">请输入4到8位的密码</span> </p> <p id="form-itemgroup"> <label for="userconfirmpasword">确认密码：</label> <input type="password" id="userconfirmpasword" class="username" onblur="confirmpassword()" oninput="confirmpassword()"> <span class="default" id="conpassworderr">请再输入一遍密码</span> </p> <p id="form-itemgroup"> <label for="userphone">手机号码：</label> <input type="text" id="userphone" class="username" onblur="checkphone()" oninput="checkphone()"> <span class="default" id="phoneerr">请输入11位手机号码</span> </p> <p> <button type="submit" class="pbtn">注册</button> </p> </form> </p> </p>
css部分
<style type="text/css"> .pall{ width:800px; font-family:'黑体'; margin:50px auto; } #titles{ font-weight:bold; font-size:18px; height:50px; line-height:50px; background:#fff9f3; text-align:center; border:1px solid #ccc;; } #contents{ margin-top:20px; background:#fff9f3; border:1px solid #ccc;; } #form-itemgroup{ padding:10px; } #form-itemgroup label{ display:inline-block; width:100px; height:32px; line-height:32px; color:#666; text-align:right; } #form-itemgroup .username{ width:200px; height:40px; line-height:40px; border:1px solid #ccc; } #form-itemgroup .default{ width:200px; height:32px; line-height:32px; color:#999; } #form-itemgroup .error{ height:32px; line-height:32px; color:#f00; } #form-itemgroup .success{ height:32px; line-height:32px; color:#096; } .pbtn{ margin-top:20px; margin-left:200px; width:100px; height:32px; line-height:32px; background-color:#f93; margin-bottom:10px; color:#ffffff; font-weight:bold; border:none; } </style>
js部分
<script type="text/javascript"> function checkform(){ var nametip = checkusername(); var passtip = checkpassword(); var conpasstip = confirmpassword(); var phonetip = checkphone(); return nametip && passtip && conpasstip && phonetip; } //验证用户名 function checkusername(){ var username = document.getelementbyid('username'); var errname = document.getelementbyid('nameerr'); var pattern = /^\w{3,}$/; //用户名格式正则表达式：用户名要至少三位 if(username.value.length == 0){ errname.innerhtml="用户名不能为空" errname.classname="error" return false; } if(!pattern.test(username.value)){ errname.innerhtml="用户名不合规范" errname.classname="error" return false; } else{ errname.innerhtml="ok" errname.classname="success"; return true; } } //验证密码 function checkpassword(){ var userpasswd = document.getelementbyid('userpasword'); var errpasswd = document.getelementbyid('passworderr'); var pattern = /^\w{4,8}$/; //密码要在4-8位 if(!pattern.test(userpasswd.value)){ errpasswd.innerhtml="密码不合规范" errpasswd.classname="error" return false; } else{ errpasswd.innerhtml="ok" errpasswd.classname="success"; return true; } } //确认密码 function confirmpassword(){ var userpasswd = document.getelementbyid('userpasword'); var userconpassword = document.getelementbyid('userconfirmpasword'); var errconpasswd = document.getelementbyid('conpassworderr'); if((userpasswd.value)!=(userconpassword.value) || userconpassword.value.length == 0){ errconpasswd.innerhtml="上下密码不一致" errconpasswd.classname="error" return false; } else{ errconpasswd.innerhtml="ok" errconpasswd.classname="success"; return true; } } //验证手机号 function checkphone(){ var userphone = document.getelementbyid('userphone'); var phonrerr = document.getelementbyid('phoneerr'); var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 if(!pattern.test(userphone.value)){ phonrerr.innerhtml="手机号码不合规范" phonrerr.classname="error" return false; } else{ phonrerr.innerhtml="ok" phonrerr.classname="success"; return true; } } </script>
浏览器中
相关文章：
js表单登陆验证示例
php表单数据验证类，php表单验证
相关视频：
js开发验证表单教程
以上就是用javascript写一个表单验证案例详解（代码全）的详细内容。