Question

这是我的剧本：

<!DOCTYPE HTML>

<html>
<head>
<title>Registration Form</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {


$('input[tabindex="0"]').focus();


$('#email').blur(function() {
var regexEmail= /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var inputEmail = $(this).val();
var resultEmail = regexEmail.test(inputEmail);
if(!resultEmail) {
    $(this).next('.error').css('display', 'inline');
}
else {
    $(this).next('.error').css('display', 'none');
}
});

$(function() {
var passwordLength = $('#password').val().length;

if(passwordLength < 8) {
    $('#password').next('.error').css('display', 'inline');
} 

});

$('#password').change(function() {
$(this).next('.error').css('display', 'none');
});
});
</script>
<style type="text/css">
.error {
display: none;
color: #FF0000;
font-size: 0.7em;
margin: 0px 0px 0px 5px;

   }
</style>
</head>
<body>

<form name="register" id="registerForm" action="submit" method="post">
<label class="label" for="email">Email: </label>
<input type="text" name="email" id="email" size="48" tabindex="0" />
<span class="error">please enter a valid email address</span>
<br /><br />
<label class="label" for="password">Password: </label>
<input type="text" name="password" id="password" size="48" tabindex="1" />
<span class="error">please enter a valid password</span>

</form>

</body>
</html>

实际上，如果密码输入框为空，则会显示错误消息。我想要做的是修改此代码，因此至少需要8个字符。我希望其他一切保持不变。为什么如果我使用if（passwordLength＆lt; 8）它不起作用？我是jQuery的新手，只是想绕过它。这是一本书中的练习，要求密码盒至少需要8个字符，对我来说显而易见的是if（passwordLength＆lt; 8），但我发现这不是它的工作方式。请光明。

Answer 1

你已经得到了它。

if(passwordLength < 8) { ... }

这是对的。您只需要在正确的位置应用它：

$('#email').blur(function() {
    var regexEmail= /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    var inputEmail = $(this).val();
    var resultEmail = regexEmail.test(inputEmail);
    if(!resultEmail) {
        $(this).next('.error').css('display', 'inline');
    }
    else {
        $(this).next('.error').css('display', 'none');
    }
});

$(function() {
    var passwordLength = $('#password').val().length;

    if(passwordLength == 0) {
        $('#password').next('.error').css('display', 'inline');
    } 

}); 

$('#password').change(function() {
    $(this).next('.error').css('display', 'none');
});

在此，有许多错误：

$(function() { ... });是$(document).ready(function() { ... });的简写。你不需要在文档就绪的方法中使用它。
您只是在blur检查电子邮件的有效性 - 这是故意的吗？我在change上进行了检查 - 而不是$('#email').blur使用$('#email').change
使用<input type="email">代替使用正则表达式。不要重新发明轮子。
缩进代码！当我读完它时，我已经在上面的块中重新格式化了它。正确的格式化使您的代码更易于阅读和调试。

我已经重写了代码并将其全部简化为：

＆＃13;

$(document).ready(function() {

	$('.error').hide();

	$('#email').on('keyup', function() {
		var input = $('#email').val();

		if (input === "" || input.length < 8) {
			$(this).next('.error').show();
		} else {
			$(this).next('.error').hide();
		}
	});
	
	$('#password').on('keyup', function() {
		var input = $('#password').val();

		if (input === "" || input.length < 8) {
			$(this).next('.error').show();
		} else {
			$(this).next('.error').hide();
		}
	});
    
});

＆＃13;

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>
    <form name="register" id="registerForm" action="submit" method="post">
        <label class="label" for="email">Email:</label>
        <input type="email" name="email" id="email" size="48" tabindex="0" />
        <span class="error">please enter a valid email address</span>
        <br/>
        <br/>
		
        <label class="label" for="password">Password:</label>
        <input type="password" name="password" id="password" size="48" tabindex="1" />
        <span class="error">please enter a valid password</span>
    </form>
</body>

＆＃13;

如何使我的jQuery脚本至少需要8个字符？

1 个答案: