javascript事件

怎样识别错误，再点击立即注册时，出现后面的红色字体，有代码吗？

img

示例如下

<!doctype html>
<meta charset="utf-8" />
<style>
    .r{color:#f00}
    .pl{padding-left:20px}
    .grey{color:grey}
    .btn{color:#fff;background:#f00;font-size:25px;padding:0 20px}
</style>
<form onsubmit="return check(this)" action="">
    <table width="600px" cellpadding="5">
        <tr>
            <td width="120"><span class="r">*</span>昵称：</td>
            <td>
                <input type="text" name="nickname"/><span class="r pl"></span>
                <div class="grey">昵称4-16位，以字母开头</div>
            </td>
        </tr>
        <tr>
            <td width="120"><span class="r">*</span>设置密码：</td>
            <td>
                <input type="password" name="pwd" /><span class="r pl"></span>
                <div class="grey">密码8-20位字母数字组合</div>
            </td>
        </tr>
        <tr>
            <td width="120"><span class="r">*</span>确认密码：</td>
            <td><input type="password" name="cpwd" /><span class="r pl"></span></td>
        </tr>
        <tr>
            <td width="120"><span class="r">*</span>手机号：</td>
            <td><input type="text" name="mobile" /><span class="r pl"></span></td>
        </tr>
        <tr>
            <td width="120"><span class="r">*</span>注册邮箱：</td>
            <td>
                <input type="text" name="email" /><span class="r pl"></span>
                <div class="grey">输入一个常用邮箱，方便密码找回</div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center" style="font-size:20px">
                <input type="checkbox" />我已阅读并同意<a href="#" target="_blank">《注册协议》</a><br /><br />
                <input type="submit" value="立即注册" class="btn" />
            </td>
        </tr>
    </table>
</form>
<script>
    function setMsg(s, el) {
        el.nextElementSibling.innerText = s;
    }
    function check(f) {
        var pass = true;
        if (!/^[a-z]/i.test(f.nickname.value) || f.nickname.value.length < 4 || f.nickname.value.length > 16) { setMsg('输入的用户名不合法', f.nickname); pass = false }
        else setMsg('', f.nickname);

        if (!/[a-z]/i.test(f.pwd.value) || !/\d/i.test(f.pwd.value) || f.pwd.value.length < 8 || f.pwd.value.length > 20) { setMsg('密码设置不符合规则', f.pwd); pass = false }
        else setMsg('', f.pwd);

        if (f.pwd.value != f.cpwd.value) { setMsg('两次密码设置不一致', f.cpwd); pass = false }
        else setMsg('', f.cpwd);

        if (!/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(f.mobile.value)) { setMsg('不是一个有效的手机号', f.mobile); pass = false }
        else setMsg('', f.mobile);

        if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(f.email.value)) { setMsg('邮箱格式不正确', f.email); pass = false }
        else setMsg('', f.email);



        return pass;
    }
</script>
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632