可以使用Bootstrap的Alert组件来优化动态显示提示信息。在每个输入框下方,添加一个隐藏的Alert组件,并设置对应的id和样式。然后通过JavaScript,根据用户输入的内容进行判断,并动态显示对应的提示信息。

首先,在每个输入框下方添加一个隐藏的Alert组件,如下所示:

<div class="form-group">
    <label for="reg-email"><em class="text-danger">*</em>邮箱:</label>
    <input type="text" class="form-control" id="reg-email" placeholder="您的常用邮箱" name="email" value="" autocomplete="off">
    <div class="alert alert-danger" id="email-error" style="display: none;">邮箱格式不正确。</div>
</div>

<div class="form-group">
    <label for="reg-username"><em class="text-danger">*</em>昵称:</label>
    <input type="text" class="form-control" id="reg-username" name="username" placeholder="昵称 4个字符以上" value="" autocomplete="off">
    <div class="alert alert-danger" id="username-error" style="display: none;">会员名不能为空。</div>
</div>

<div class="form-group">
    <label for="reg-pwd"><em class="text-danger">*</em>登录密码:</label>
    <input type="password" class="form-control" id="reg-pwd" placeholder="请输入6位以上密码" name="password" autocomplete="off">
    <div class="alert alert-danger" id="password-error" style="display: none;">密码不能为空。</div>
</div>

然后,在JavaScript中,根据用户输入的内容进行判断,并动态显示对应的提示信息,如下所示:

$(document).ready(function() {
    $('#myform').submit(function(e) {
        e.preventDefault();

        // 获取用户输入的内容
        var email = $('#reg-email').val();
        var username = $('#reg-username').val();
        var password = $('#reg-pwd').val();

        // 邮箱格式判断
        if (email === '') {
            $('#email-error').show();
        } else {
            $('#email-error').hide();
        }

        // 昵称不能为空判断
        if (username === '') {
            $('#username-error').show();
        } else {
            $('#username-error').hide();
        }

        // 密码不能为空判断
        if (password === '') {
            $('#password-error').show();
        } else {
            $('#password-error').hide();
        }

        // 如果所有输入框都不为空,则提交表单
        if (email !== '' && username !== '' && password !== '') {
            $('#myform')[0].submit();
        }
    });
});

这样,当用户输入不符合要求时,对应的提示信息会动态显示出来,以提醒用户正确输入


原文地址: http://www.cveoy.top/t/topic/hHXR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录