普通的用户注册前台验证

最新推荐文章于 2022-12-29 14:32:32 发布

Hi_YouXu

最新推荐文章于 2022-12-29 14:32:32 发布

阅读量837

点赞数

分类专栏： JS 文章标签： html 正则注册验证

本文链接：https://blog.csdn.net/Super_Man_X/article/details/49466309

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

以下是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'>格式错误,邮箱账号@域名如：good@qq.com";
            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>