form action=user!useradd method=post id=myform div class=form-group label for=reg-emailem class=text-dangerem邮箱:label input type=text c
可以使用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 著作权归作者所有。请勿转载和采集!