script中不弹出告警框的警告显示

Question

script中后面那个红色的警告怎么设置哎，是alert么？我只会弹出告警框来。😂

Answer 1

题主要的代码如下

<style>
    b{color:#f00;font-weight:normal}
    b.hide{display:none}
    b.note{color:#666}
    .submit{background:#f00;width:200px;line-height:40px;text-align:center;font-size:30px;color:#fff}
    td{vertical-align:top}
</style>
<form onsubmit="return checkForm(this)">
    <table border="0">
        <tr><td><b>*</b>昵称：</td><td><input type="text" name="nickname" class="valid" /><b class="msg hide">　输入的用户名不合法</b><br /><b class="note">昵称4-16位，以字母开头</b></td></tr>
        <tr><td><b>*</b>设置密码：</td><td><input type="text" name="pwd" class="valid" /><b class="msg hide">　密码设置不符合规则</b><br /><b class="note">密码8-20位字母数字组合</b></td></tr>
        <tr><td><b>*</b>确认密码：</td><td><input type="text" name="cpwd" class="valid" /><b class="msg hide">　两次密码设置不一致</b></td></tr>
        <tr><td><b>*</b>手机号：</td><td><input type="text" name="mobile" class="valid" /><b class="msg hide">　不是一个有效的手机号</b></td></tr>
        <tr><td><b>*</b>注册邮箱：</td><td><input type="text" name="email" class="valid" /><b class="msg hide">　邮箱格式不正确</b><br /><b class="note">输入一个常用邮箱，方便密码找回</b></td></tr>
        <tr>
            <td colspan="2" style="padding-left:50px">
                <input type="checkbox" name="agree" class="valid" />我已阅读并同意<a href="#">《注册协议》</a><br /><b class="msg hide">　请勾选我已阅读并同意</b>
                <br /><input type="submit" class="submit" value="立即注册" />
            </td>
        </tr>
    </table>
</form>
<script>
    var inputs = document.querySelectorAll('.valid');
    for (var i = 0; i < inputs.length; i++) inputs[i].onchange = checkValue;
    function checkValue() {
        var error = false;
        switch (this.name) {
            case 'nickname': error = !/^[a-z].{3,15}$/i.test(this.value); break;
            case 'pwd': error = !/^[a-z\d]{8,20}$/i.test(this.value); break;
            case 'cpwd': error = this.form.pwd.value != this.value; break;
            case 'mobile': error = !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.value); break;
            case 'email': error = !/^[a-z\d\u4e00-\u9fa5]+@[a-z\d_-]+(\.[a-z\d_-]+)+$/i.test(this.value); break;
            case 'agree': error = !this.checked;
        }
        this.parentNode.querySelector('.msg').classList[error?'remove':'add']('hide');
        return error;
    }
    function checkForm(f) {
        var error = false;
        for (var i = 0; i < inputs.length; i++) {
            var r = inputs[i].onchange();
            if (!error) error = r;
        }

        if (error) return false;//阻止表单提交
    }
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~