普通的用户注册前台验证

在一次机会下，帮朋友写了个用户注册的前台验证，输入内容通过正则验证，简单快捷，与大家分享

以下是html代码

<div class="form-group  has-error required">    <span class="col-md-2" for="">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：</span>    <input id="phone" name="phone" placeholder="请输入手机号码" type="text" onblur="checkPhone()">    <span class="error">*</span>    <span id="span_phone"></span></div><div class="form-group  has-error required">    <span class="col-md-2" for="">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</span>    <input id="email" name="email" placeholder="请输入邮箱地址" type="text" onblur="checkEmail()">    <label class="error">*</label>    <label class="help-block col-md-offset-2">请输入正确的邮箱地址</label>    <span id="span_email"></span></div><div class="form-group  has-error required">    <span class="col-md-2" for="">设&nbsp;置&nbsp;密&nbsp;码：</span>    <input id="password" name="password" placeholder="请输入8位密码" type="password" onblur="checkPwd()">    <label class="error">*</label>    <label class="help-block col-md-offset-2">至少包含一位大写字母，小写字母，数字，特殊字符</label>    <span id="span_pwd"></span></div><div class="form-group  has-error required">    <span class="col-md-2" for="">确&nbsp;认&nbsp;密&nbsp;码：</span>    <input id="password2" name="password2" placeholder="请输入8位密码" type="password" onblur="checkPwd2()">    <label class="error">*</label>    <label class="help-block col-md-offset-2">再次确认密码</label>    <span id="span_pwd2"></span></div><div class="btn_nav">    <input class="submit_zc" id="submit" name="submit" value="立即注册" type="submit" onclick="return mysubmit()"></div>

以下是JS代码

<script type="text/javascript">    function checkPhone(){        var phone = document.getElementById("phone").value.trim();        if(phone.length == 0){            document.getElementById("span_phone").innerHTML = "<font color='red'>手机号不能为空";            document.getElementById("phone").focus();        } else if(!(/^1[358][0-9]{9}$/.test(phone))){            document.getElementById("span_phone").innerHTML = "<font color='red'>不是完整的11位手机号或者正确的手机号";            document.getElementById("phone").focus();            return false;         } else            document.getElementById("span_phone").innerHTML = "";        return true;    };    function checkEmail(){        var email = document.getElementById("email").value.trim();        if(email.length == 0){            document.getElementById("span_email").innerHTML = "<font color='red'>邮箱不能为空";            document.getElementById("email").focus();        } else if(!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email))){            document.getElementById("span_email").innerHTML = "<font color='red'>格式错误,邮箱账号@域名如：[e-mail]";            document.getElementById("email").focus();            return false;         }else            document.getElementById("span_email").innerHTML = "";        return true;    };    function checkPwd(){        var password = document.getElementById("password").value.trim();        if(password.length == 0){            document.getElementById("span_pwd").innerHTML = "<font color='red'>密码不能为空";            document.getElementById("password").focus();        } else if(!(/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.]).*$/.test(password))){            document.getElementById("span_pwd").innerHTML = "<font color='red'>格式错误,至少包含一位大写字母，小写字母，数字，特殊字符";            document.getElementById("password").focus();            return false;         }else            document.getElementById("span_pwd").innerHTML = "";        return true;    };    function checkPwd2(){        var password = document.getElementById("password").value.trim();        var password2 = document.getElementById("password2").value.trim();        if(password2.length == 0){            document.getElementById("span_pwd2").innerHTML = "<font color='red'>密码不能为空";            document.getElementById("password2").focus();        } else if(password != password2){            document.getElementById("span_pwd2").innerHTML = "<font color='red'>两次输入不一致";            return false;         }else            document.getElementById("span_pwd2").innerHTML = "";        return true;    };    function mySubmit() {        if (checkPhone() && checkEmail() && checkPwd() && checkPwd2()) {            alert("信息提交成功！");            return true;        }        else {            alert("信息填写错误无法提交，请填写正确后提交！");            return false;        }    };    function checkName() {    var userName = document.getElementById("userName").value.trim();    var filter = /^[a-zA-Z][a-zA-Z0-9_]{5,16}$/;    if (userName.length == 0) {        document.getElementById("name").innerHTML = "<font color='red'>用户名不能为空";        document.getElementById("userName").focus();        return false;    }    else if (!filter.test(userName)) {        document.getElementById("name").innerHTML = "<font color='red'>用户名格式错误（以字母开头，由字母、数字、下划线组成限6-16位）";        document.getElementById("userName").focus();        return false;    }    else        document.getElementById("name").innerHTML = "用户名可用";    return true;}</script>