输入空时jQuery文本输入实时验证清除错误[重复]
Posted
技术标签:
【中文标题】输入空时jQuery文本输入实时验证清除错误[重复]【英文标题】：jQuery Text Input Real Time Validation clear error when input empty [duplicate] 【发布时间】：2019-02-12 05:49:45 【问题描述】：我从网上获取了一些代码来验证名字。它可以工作，但是我想进行一些调整。我希望该字段为空时错误消息消失。另外我想为文本添加边距，因为它与下一个字段不均匀，但似乎无法使其工作。
这是使用 javascript 的标记。这使用 bootstrap 和下面包含的另一个样式表。
$(document).ready(function ()
var $regexname = /^([a-zA-Z]2,16)$/;
$('.name').on('keypress keydown keyup', function ()
if (!$(this).val().match($regexname))
// there is a mismatch, hence show the error message
$('.emsg').removeClass('hidden');
else
// else, do not display message
$('.emsg').addClass('hidden');
);
);.signup2container-stage1
width: 88%;
margin: auto;
#signupsectioncontainer-stage2
float: left;
width: 45%;
height: 2000px;
background-color: orange;
margin-top: 20px;
#signupsectioncontainer-stage3
width: 80%;
height: 90%;
background-color: #ffffff;
margin: auto;
#signup2validationinputs input
width: 100%;
height: 45px;
margin: 10px 0px 10px 0px;
.signuptextinputsstyle1
outline-width: 0;
background-color: #e3e5e8;
border: none;
padding: 10px 10px 10px 10px;
float: left;
display: block;
#signup2submitbutton
width: 100%;
margin-top: 10px;
padding: 20px 10px 20px 10px;
border: none;
outline-width: 0;
color: #ffffff;
background-color: #4caf50;
#signup2submitbutton #signup2submitbutton:hover
background-color: #48a44d;
.emsg
color: red;
.hidden
visibility: hidden;
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clear">
</div>
<div class="signup2container-stage1">
<div id="signupsectioncontainer-stage2">
<h1 id="signup2title">Sign Up</h1>
<div id="signupsectioncontainer-stage3">
<div id="signup2validationinputs">
<input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
<p>
<span id="validname" class="emsg hidden">Please Enter a Valid Name</span>
</p>
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
<button id="signup2submitbutton">SIGN UP</button>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：您应该检查名字输入的长度，如果它是 0，然后隐藏错误消息，否则如果输入的值与正则表达式不匹配，则显示它。您应该同时使用jQuery 的input 事件而不是keypress、keyup 和keydown。
通过使用BootStrap 警报类，您可以通过将消息span 标记更改为p 标记并为其指定class="alert alert-danger" 类并删除emsg 类和给p 标记一个id="emsg"，以便稍后通过JavaScript 引用它，并删除名字input 标记上的float 规则。
这是一个可运行的 sn-p 来说明所有内容。
$(document).ready(function ()
var $regexname = /^([a-zA-Z]2,16)$/,
msg = $('#emsg'),
name = $('.name');
name.on('input', function ()
var val = $(this).val();
if(val.length === 0)
msg.addClass('hidden');
else if (!val.match($regexname))
// there is a mismatch, hence show the error message
msg.removeClass('hidden');
else
// else, do not display message
msg.addClass('hidden');
);
);.signup2container-stage1
width: 88%;
margin: auto;
#signupsectioncontainer-stage2
/* just for the demo purpose I removed the next two lines
float: left;
width: 45%; */
height: 2000px;
background-color: orange;
margin-top: 20px;
#signupsectioncontainer-stage3
width: 80%;
height: 90%;
background-color: #ffffff;
margin: auto;
#signup2validationinputs input
width: 100%;
height: 45px;
margin: 10px 0px 10px 0px;
.signuptextinputsstyle1
outline-width: 0;
background-color: #e3e5e8;
border: none;
padding: 10px 10px 10px 10px;
display: block;
#signup2submitbutton
width: 100%;
margin-top: 10px;
padding: 20px 10px 20px 10px;
border: none;
outline-width: 0;
color: #ffffff;
background-color: #4caf50;
#signup2submitbutton #signup2submitbutton:hover
background-color: #48a44d;
.emsg
color: red;
.hidden
display: none;
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clear"></div>
<div class="signup2container-stage1">
<div id="signupsectioncontainer-stage2">
<h1 id="signup2title">Sign Up</h1>
<div id="signupsectioncontainer-stage3">
<div id="signup2validationinputs">
<input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
<p id="emsg" class="alert alert-danger hidden">Please Enter a Valid Name</p>
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
<button id="signup2submitbutton">SIGN UP</button>
</div>
</div>
</div>
</div>Ps: 与其使用具有visibility: hidden; 规则的类来隐藏/显示错误消息，我建议您放弃该类并给包含消息的p 标记一个@ 987654341@ 属性然后使用jQuery 您可以在没有动画的情况下对其进行动画处理或隐藏/显示它，所有这些都无需使用任何类。即：msg.slideDown(400);
编辑：
您以前看到的差距是由于visibility: hidden; 规则不会从页面中删除元素（“删除”是指视觉上删除，元素在这里并且可以重新出现）。因此，在.hidden 类中，我将visibility: hidden; 规则更改为display: none;。
希望我把你推得更远。
【讨论】：
谢谢，稍微调整一下效果很好:) @JasonSingh 很高兴有帮助！如果我的回答真的有帮助，请标记为已接受。 这行得通，但是我在页面上的样式不同，这使得错误消息的背景颜色出现在输入上方，我尝试添加姓氏并且背景颜色位于顶部容器。 在我做错之前我没有意识到这是不正确的。 在我的回答中，我确实纠正了我发现的标记中的几乎所有错误，我将包含错误消息的span 更改为 p 标记，并从输入，尝试按照我的答案进行操作，它应该可以在 sn-p 中工作。【参考方案2】：
我不确定您是否特别想要add 或remove CSS 类，但您也可以将错误消息设置为默认隐藏（CSS 或内联style 属性）并仅在出现错误时显示。所以你会这样做
$(function()
var $regexname = /^([a-zA-Z]2,16)$/;
$('.name').on('keypress keydown keyup', function()
if ($(this).val().trim().length && !$(this).val().match($regexname))
// there is a mismatch, hence show the error message
$('.emsg').show();
else
$('.emsg').hide();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="signupsectioncontainer-stage2">
<h1 id="signup2title">Sign Up</h1>
<div id="signupsectioncontainer-stage3">
<div id="signup2validationinputs">
<input class="name signuptextinputsstyle1" type="text" placeholder="First Name" required/>
<p>
<span id="validname" class="emsg" style="display:none;">Please Enter a Valid Name</span>
</p>
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Last Name">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Choose a Username">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Date Of Birth">
<input class="signuptextinputsstyle1" type="text" name="" placeholder="Email">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Create Password">
<input class="signuptextinputsstyle1" type="password" name="" placeholder="Confirm Password">
<button id="signup2submitbutton">SIGN UP</button>
</div>
</div>
</div>【讨论】：
【参考方案3】：使用 jquery .change 函数并检查值是否为空。
$(".name").change(function
if (!$this.val())
$(".emsg").addClass("hidden")
)
希望这会有所帮助。
【讨论】：
以上是关于输入空时jQuery文本输入实时验证清除错误[重复]的主要内容，如果未能解决你的问题，请参考以下文章