我尝试通过检查是否已在文本框中输入内容来验证用户输入。我试图用javascript做到这一点。我想要实现的是,用户获得一个特定字段为空的警告框。跨度还将用于在所需字段上显示错误消息。用户开始输入后,应清除错误消息。请问我该怎么做?这是我到目前为止所做的,但它没有按预期工作,我觉得我在重复代码。 Fiddle
<form>
<div id="Login">
<div>
<label for="signin_email">Email Address*: </label><input id="signin_email" name="signin_email" type="email" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your Email address</span>
</div>
<div>
<label for="signin_pword">Password*: </label><input id="signin_pword" name="signin_pword" type="password" maxlength="24" /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your Password</span>
</div>
<div>
<button type="submit" id="signin" name="signin" value="Sign In" onclick="return signin_validate()">Sign in</button>
</div>
</div>
<div id="register">
<h2>Register here</h2>
<div>
<label for="fname">First Name*: </label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
</div>
<div>
<label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text" /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
</div>
<div>
<button type="submit" id="register" name="register" value="Register" onclick="return validateForm()">Register</button>
</div>
</div>
</form>
使用Javascript:
function validateForm(){
var valid=true;
var msg;
document.getElementById('fname').onkeyup=function(){
if(document.getElementById('fname').value.length==0){
valid=false;
msg='Please enter your first name';
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
document.getElementById('fname').focus();
}
else{
document.getElementById('fnameerror').style.display='none';
}
if(document.getElementById('fname').value.length==0){
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
document.getElementById('fname').focus();
msg='Please enter your first name';
}
else{
document.getElementById('fnameerror').style.display='none';
}
}
if(valid==false){
alert(msg);
}
return valid;
}
function signin_validate(){
//VALIDATION FOR SIGN IN FORM
//validating the password field
//alert("You are here");
var valid=true;
var msg;
if(document.getElementById('signin_email').value.length==0){
valid=false;
msg='Please enter your email';
document.getElementById('signin_emailerror').style.display='inline';
document.getElementById('signin_emailerror').style.color='red';
document.getElementById('signin_email').focus();
}
else{
document.getElementById('signin_emailerror').style.display='none';
}
document.getElementById('signin_email').onkeyup=function(){
if(document.getElementById('signin_email').value.length==0){
valid=false;
msg='Please enter your email';
document.getElementById('signin_emailerror').style.display='inline';
document.getElementById('signin_emailerror').style.color='red';
document.getElementById('signin_email').focus();
}
else{
document.getElementById('signin_emailerror').style.display='none';
}
}
if(valid==false){
alert(msg);
}
return valid;
}
另外,正如小提琴中所见,我必须以&#39;形式&#39;,登录和注册。当我在寄存器中的字段中输入内容并单击登录按钮时,无论我进入寄存器中的任何内容都会消失。这发生在Firefox上但不是Chrome上,请问如何解决这个问题?我需要创建两个单独的表单吗?这样做是否理想?
答案 0 :(得分:0)
你似乎正在重新发明轮子一点点。 为什么不简单地在输入字段中添加必需项以阻止它们为空?
http://www.w3schools.com/tags/att_input_required.asp
这样一来,它就会为你解决这个问题,并且你没有涉及可怕的警报信息
答案 1 :(得分:0)
这是一个应该支持IE8 +的解决方案,但是没有IE8,所以我无法确认。它是用Vanilla JavaScript编写的,但你可以使用jQuery或其他一些框架来清理它。
要模拟旧浏览器,我需要禁用所有&#34; required&#34;属性。即使您的浏览器不支持它也很好,因为HTML5标准的编码将允许您的网页向前兼容。
这是一种关闭&#34;关闭&#34;所有必需的输入。
// Strip out the require to simulate IE9
var simulateLegacyBrowser = function() {
var nodes = document.querySelectorAll('[required=true]');
Array.prototype.forEach.call(
Array.prototype.slice.call(nodes),
function(node) {
node.required = false;
});
};
如果由于旧版浏览器而无法访问所需属性,那么您可以做的最好的事情就是命名您的类。然后,您可以访问所有&#34; required&#34;类名称的元素。举个例子:
<form id='myForm'>
<div class="required">
<label for='field1'>Field 1</label>
<input typue="text" id='field1' name='field1' required='true' />
<span class='status'></span>
</div>
<div class="required">
<label for='field2'>Field 1</label>
<input typue="text" id='field2' name='field2' required='true' />
<span class='status'></span>
</div>
<div>
<input type='submit' />
</div>
</form>
要验证表单,您必须劫持onSubmit
函数。使用JavaScript时,最好尽可能不引人注目。这意味着HTML不应该依赖于JavaScript。如果用户使用没有JavaScript的浏览器,则您必须使用服务器来验证表单。
这是代码。我不得不创建一些帮助方法来保持代码清洁并跨浏览器工作。这不是一个完整的证明解决方案,因为它只选择.required input
s。您必须对其进行修改才能支持<select>
,<textarea>
等等。我将此作为练习留给您。
关于getNextNode的说明。我之所以不能调用node.nextSibling,是因为在某些浏览器中,node.nextSibling将返回下一个文本节点,相反,某些浏览器会返回下一个元素。因此,我们需要设置一个函数来确保跨浏览器的兼容性。
此代码可以进一步推广以使用您想要的任何形式,但我会留给您修复。
// Get the next Element
var getNextNode = function(root) {
var node = root;
do {
node = node.nextSibling;
} while ( node.nodeType != 1 );
return node;
};
// Set an input as invalid
var setInvalid = function(input) {
var status = getNextNode(input);
status.textContent = "This is a required field";
input.className = [input.className, 'invalid'].join(' ');
};
// Set an input as valid
var setValid = function(input) {
var status = getNextNode(input);
status.textContent = '';
input.className = input.className.replace(/invalid/g, '');
};
document.forms['myForm'].onsubmit = function(e) {
e.preventDefault();
e.stopPropagation();
// Change this to select required elements
var requiredInputs = document.querySelectorAll('.required input');
// Loop through each "required" input
Array.prototype.forEach.call(
Array.prototype.slice.call(requiredInputs),
// For each input
function(input) {
// If it's valid is empty
if (input.value.length === 0) {
setInvalid(input);
} else {
setValid(input);
}
});
};
为了让最终用户看起来很好看,如果允许,请尝试使用CSS。这会将您的演示文稿与逻辑分开。使用逻辑中的类来调用要应用的正确演示文稿。例如,以下是此演示文稿:
.required label:after {
content: '*';
}
.required .status {
color: red;
}
.required .invalid {
border: 1px solid red;
}
您可以在此jsFiddle查看一个有效的示例。祝你好运并享受有趣的编码!
为了您的兴趣,jsFiddle提供了更先进的解决方案。我不会将代码附加到此解决方案,因为它超出了范围,但它更加可配置。在此解决方案中,您可以修改HTML,然后将HTML的状态设置添加到配置数组,这将根据输入的状态更新DOM。