我正在处理一个包含多个字段和提交按钮的网页表单。当用户点击提交按钮时,我需要验证必填的文本框是否已经填写,并且电话号码是否符合正确的格式。我只接受7位或10位数字的电话号码,但是字符如 (,), (-)等是可以接受的。如果电话号码框为空或者电话号码不符合正确的格式(不是7位或10位数字,不是数字),或者没有填写,则我需要在该文本框周围添加红色边框。这个边框应该保持不变,直到用户纠正错误。
我无法正确地实现这个功能。我尝试了几种不同的方法,但是得到了不同类型的错误。一种方法似乎可以工作,但是红色边框只显示了一秒钟,然后消失了,文本框中的值也被重置了。
以下是我的代码和jsfiddle链接:
Javascript:
我无法正确地实现这个功能。我尝试了几种不同的方法,但是得到了不同类型的错误。一种方法似乎可以工作,但是红色边框只显示了一秒钟,然后消失了,文本框中的值也被重置了。
以下是我的代码和jsfiddle链接:
Javascript:
<script type="text/javascript">
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phone.value.match(phoneNum)) {
return true;
}
else {
document.getElementById("phone").className = document.getElementById("phone").className + " error";
return false;
}
}
</script>
HTML:
<form name="myForm" onsubmit = "return validateForm()">
Phone Number: <input type="text" id="phone"><br>
</form>
JSFiddle:
phone
设置为元素的value
属性,然后在测试中,你再次访问了已经获取的值的value
属性,但这个值不存在。 - user663031document.getElementById
?而且你应该使用test而不是match。 - RobG