Question

在此表单上，当我正确输入电子邮件地址并将名称字段留空时，页面正在提交并且javacript未运行。否则它的工作正常。

请有人帮我解决这个JavaScript。

function validateform(data)
{
    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
        }
        validField += "- Please Enter A Valid E-mail Address\n";
        alert(validField);
        return false;
}


<form name="data" onsubmit="return validateform(this);" action="some.php" method="post">
<div>
<label>Name:</label><input type="text" id="name" name="name" size="20"  maxlength="20"/></div>

<div>
<label>E- mail Address:</label><input type="text" id="email" name="email" size="20"  maxlength="30"/></div>

<input type="submit" name="submit" value="Start Now!"/>
</form>

Answer 1

您的代码几乎不需要更改。问题是因为function validateform()始终返回false而不管电子邮件验证。在工作页面下面测试您的代码。您应该在else {}块中添加警报并返回false。

<html> 
<head>  
<script type="text/javascript">
function validateform(data)
{
    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
     }
     else {
        validField += "- Please Enter A Valid E-mail Address\n";
        alert(validField);
        return false;
        }
}
</script> 
</head>
<body>
<form name="data" onsubmit="return validateform(this);" action="some.php" method="post">
<div>
<label>Name:</label><input type="text" id="name" name="name" size="20"  maxlength="20"/></div>
<div>
<label>E- mail Address:</label><input type="text" id="email" name="email" size="20"  maxlength="30"/></div>

<input type="submit" name="submit" value="Start Now!"/>
</form>
</body>
</html>

Answer 2

您需要将您的功能放在<script>标签之间，除此之外我觉得还不错。

Answer 3

您需要稍微重构一下代码。如果电子邮件地址有效，则无论名称字段如何，您都会返回该函数。

function validateform(data) {
    var validField = "";
    var isValid = false;
    var namevalid = /^[a-zA-Z ]+$/;
    if (data.name.value == "") {
        validField += "- Please Enter Your Name\n";
    }
    else if (data.name.value.search(namevalid) == -1) { 
        validField += "- Entered Name contains Numbers or Symbols\n"; 
        }
    if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value))) {
        validField += "- Please Enter A Valid E-mail Address\n";
    };
    if (validField == "") {
        isValid = true;
    }
    if (!isValid) {
        alert(validField);
    }
    return isValid;
}

Answer 4

我不太清楚为什么会失败，但根本没有调用该函数。可能是onsubmit。

为什么不使用像jQuery这样的库？看看这个例子，这很好用：http://jsfiddle.net/tR3XQ/1/

$("form[name=data]").submit(function(){

    var validField = "";
    var namevalid=/^[a-zA-Z ]+$/;
    if(data.name.value == ""){validField += "- Please Enter Your Name\n";}
    else if(data.name.value.search(namevalid)==-1){validField += "- Entered Name contains Numbers or Symbols\n";}
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
        return true;
    }
    validField += "- Please Enter A Valid E-mail Address\n";
    alert(validField);
    return false;

});

Answer 5

您需要在validField中为电子邮件检查添加值检查，否则将被忽略

if (validField.length = 0 && /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(data.email.value)){
  return true;
}
validField += "- Please Enter A Valid E-mail Address\n";
alert(validField);
return false;

有问题使用JavaScript验证表单

5 个答案: