如何使用Javascript验证表单字段

Question

我试图验证我的表单电话字段，以防止用户在我的javascript中输入相同的数字。

如果用户提供的数字与我的javascript中的数字相匹配，他们将得到一个警告，并且表单不会提交。

但是，我注意到下面的代码显示了数字是否匹配的警告。

我需要纠正，知道我做错了什么。谢谢。

代码下面;

$('.validate').hide();
$('body').on('blur', '#phone', function() {
$('.validate').hide();
isphone($(this).val());
});
function isphone(phone) {
if (phone === "1234" || phone === "23456"){
$(".validate").show();

} else {
$(".validate").hide();
}
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form action='' method='POST' id="submitForm" >

<input type="phone" name='phone'  required=''  id="phone" placeholder="0000-000-0000"/>
<div class="validate"><span style="color: red;"><b>Please enter a valid phone!</b></span></div>

<button href='/' type='submit' id="submitForm">Process</button>

</form>

Answer 1

我相信这应该行得通。我将隐藏和显示$('.validate')的更改移动到isphone函数，并删除了没有做任何有用的done变量(使用if...else代替)。另外，如果你已经在使用JQuery，不要使用document.getElementById。

$('.validate').hide();
$('body').on('blur', '#phone', function() {
$('.validate').hide();
isphone($(this).val());
});
function isphone(phone) {
if (phone === "1234" || phone === "23456"){
$(".validate").hide();
} else {
$(".validate").show();
}
}