Question

我正在学习Javascript并且正在尝试设置基本表单验证，该验证应该具有以下功能：

如果发现错误，请将文本字段背景颜色更改为红色，将字段值更改为错误消息
如果未找到任何错误，请继续

我的问题

验证工作正常但即使没有发现错误仍会显示错误信息......我做错了什么？

代码如下：

function validate(){
    //form validation

    var name=document.getElementById("name");
    var surname=document.getElementById('surname');

    //name
    if (name.value=='') {
        name.style.backgroundColor="red";
        name.style.color="white";
        name.value="Name is required"
        return false;
    } 

    else if(isNaN(name)==true){
        name.style.backgroundColor="red";
        name.style.color="white";
        name.value="Name: Only enter letters A-Z"
        return false;
    } 

    //surname
    if (surname.value == ""){
        surname.style.backgroundColor="red";
        surname.style.color="white";
        surname.value="Surname is required"
        return false;
    }

    else if(isNaN(name)==true){
        surname.style.backgroundColor="red";
        surname.style.color="white";
        surname.value="Surname: Only enter letters A-Z"
        return false;
    } 
    return true;
 }

HTML

 <form id="enquire" method="post">
    <h2>Test Drive an Audi Today</h2>
    <input type="text" id="name" value="Name" class="textbox"  name="name" onfocus="if(this.value=='Name' || this.value=='Name is required' || this.value=='Name: Only enter letters A-Z' ) this.value='';" /><br />
    <br />
    <input type="text" id="surname" value="Surname" class="textbox"  name="surname"  onfocus="if(this.value=='Surname') this.value='';"  /><br />

    <input type="submit" name="submit" class="butt" value="Send" onclick="return validate()"  />

Answer 1

你需要将输入字段的值传递给isNaN()，现在你传递的dom元素总是返回true，因为它不是数字

isNaN(name.value)

演示：Fiddle

Javascript - 验证在满足正确条件时返回false

1 个答案: