logo标签列表

使用 JavaScript 进行表单验证（不使用 jQuery）

javascript
3
我在课堂上有一个作业，需要制作一个简单的表单，其中有五个字段，必须填写三个。但我在编写代码时遇到了问题。
这是我的教授要求的： { 提交表单时，浏览器应检查以下内容： 1. 必填字段是否已填写 2. 使用正则表达式检查输入的格式是否适合电子邮件、电话和网站字段。需要检查的表单格式如下： - 电子邮件：[字母数字字符串，包括 . 和 _]@[字母数字字符串，包括 . 和 _].[字母字符串] - 电话号码：(ddd)ddd-dddd 或 ddd-ddd-dddd 等 - 网站：www.[字母数字字符串，包括 . _ -].[com 或 net 等] 如果发现任何错误，则不应提交表单，并生成相应的错误消息。 }
所有验证必须是“客户端”的，即在浏览器中使用 Javascript 进行（不在任何服务器上，也没有使用 Jquery 或任何其他编程语言，只能使用所需的 HTML）。严格禁止使用任何创作工具。
这是我现在拥有的，请帮忙看一下。以下是代码。我做错了什么？
 <script language = "JavaScript">
<!--
function validateForm(){
//This is to check that required fields are filled
    var x = document.contact.Name.value;
    var y = document.contact.Email.value;
    var z = document.contact.Website.value;
    var p = document.contact.Phone.value;

    if(x==null || x ==""){
        alert('Name must be filled out');
        return false;
    }
    if (y ==null || y == ""){
        alert('Email must be filled out');
        return false;
    }
    if (z == null || z == ""){
        alert('Website must be filled out');
        return false;
    }


    if(!isEmail()){
        alert('This is not a correct Email format');
    }
    if (!isTelephone()){
        var errorText = document.createTextNode(
            "This is not a correct Phone number format");
    }
    if(!isWeb()){
        errorText = document.createTextNode(
            "This is not the correct Website format");
    }


}

function isTelephone(){
    //This checks that the phone number is in the required format
    return document.contact.Phone.value.match(
        /^\(\d\d\d-d\d\d\-\d\d\d\d$/);
    }
function isEmail(){
    //This is for checking email format
    return document.contact.Email.value.match(
        /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/);
    }

function isWeb(){
    return document.contact.Website.value.match(
        /^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a‌​-zA-Z]{2,})?$/);
    }
-->
</script>


<body>
<form name="contact" action="" method="post" onSubmit = "return validateForm();">

Name: <input type="textbox" name="Name" value=""  > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value=""  > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>

<input type="submit" value="Submit Contact Details">


<input type="reset" value="Clear" 
    ONCLICK="
    alert('This will clear the form.');
    Name.value=' '
    Company.value=' '
    Email.value=' '
    Telephone.value=' '
    Website.value=' '"><br>

</form>
</body>
</html>
1
你的函数从未被调用 - 你在 onSubmit 中调用了验证，但是你的表单按钮的类型为 button，因此它们永远不会提交表单。 - Aides
1
<input type="submit" value="Submit Contact Details"> - Rayon
4个回答
0

试一下：- https://jsfiddle.net/vduwxjmv/

这可以在每个需要强制填写值的 HTML 控件上使用 required 属性来完成，而无需 JavaScript。为了清除内容，您可以使用输入类型为 reset 的控件。

HTML：

<form name="contact" action="" method="post">

Name: <input type="textbox" name="Name" value="" required> <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value=""> <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" required> <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" required><font color = red>*Required </font><br>

<input type="submit" value="Submit Contact Details">


<input type="reset" value="Clear" />
它是依赖于浏览器的。一些浏览器不完全支持它，因此使用JS jQuery是一个好选择。 - Zigri2612
0
您可以使用以下 JavaScript 代码进行检查。
var result = $("#form")[0].checkValidity();

或者您可以更改输入按钮

<input type="submit" value="Submit Contact Details">
3
顺便说一下，伙计，jQuery 没有被打上标签！ - Rayon
因为教授说我们不能在这个作业中使用jQuery，所以我没有标记它。 - Shannon
你可以将输入按钮更改为提交按钮并尝试使用<input type="submit" value="Submit Contact Details">，或者使用Document.getElementById("form").checkValidity()。 - T.Yetis
我已经进行了这些更改，但是当必填字段为空时，警报消息仍然没有触发。 - Shannon
0
<!DOCTYPE html>

<html>
<body>
<form name="contact" method="post">

Name: <input type="text" class="form-control" name="Name" placeholder="Name" required="required" /> <font color = red>*Required </font><br>
Company: <input type="text" class="form-control" name="Company" placeholder="Company" /> <font color = red>Optional </font><br>
Email: <input type="email" class="form-control" name="Email" placeholder="Email" required="required" /> <font color = red>*Required </font><br>
Telephone: <input type="text" class="form-control" name="Telephone" placeholder="Telephone"/> <font color = red>Optional </font><br>
Website: <input type="text" class="form-control"  name="Website" placeholder="Website" required="required" /><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"><br>
</form>
</body>
</html>

将类型从按钮更改为提交。 如果将类型设置为重置，则会清除内容。 如果给出required="required"，则该字段将被视为必填项。
JavaScript在哪里？ - Shannon
没有脚本的情况下，我们可以通过使用必需属性来实现验证。 - VALARMATHI
0

<html>
  <head>
<script language = "JavaScript">

function validateForm(thisVar){ alert('method Called From: ');alert(thisVar.value);alert(thisVar.name);
//This is to check that required fields are filled
    var x = document.contact.Name.value;
    var y = document.contact.Email.value;
    var z = document.contact.Website.value;
    var p = document.contact.Phone.value;

    if(x==null || x ==""){
        alert('Name must be filled out');
        return false;
    }
    if (y ==null || y == ""){
        alert('Email must be filled out');
        return false;
    }
    if (z == null || z == ""){
        alert('Website must be filled out');
        return false;
    }


    if(!isEmail()){
        alert('This is not a correct Email format');
    }
    if (!isTelephone()){
        var errorText = document.createTextNode(
            "This is not a correct Phone number format");
    }
    if(!isWeb()){
        errorText = document.createTextNode(
            "This is not the correct Website format");
    }


}

function isTelephone(){
    //This checks that the phone number is in the required format
    return document.contact.Phone.value.match(
        /^\(\d\d\d-d\d\d\-\d\d\d\d$/);
    }
function isEmail(){
    //This is for checking email format
    return document.contact.Email.value.match(
        /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/);
    }

function isWeb(){
    return document.contact.Website.value.match(
        /^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a‌​-zA-Z]{2,})?$/);
    }

</script>

</head>
<body>
<form name="contactForm" action="" method="post" onSubmit = "return validateForm(this);">

Name: <input type="textbox" name="Name" value=""  > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value=""  > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>

<input type="submit" value="Submit Contact Details" onclick="validateForm(this);">


<input type="reset" value="Clear" 
    ONCLICK="
    alert('This will clear the form.');
    Name.value=' '
    Company.value=' '
    Email.value=' '
    Telephone.value=' '
    Website.value=' '"><br>

</form>
</body>
</html>

您可以通过以下两种方式进行验证 ---

  1. 使用提交类型按钮
  2. 在按钮点击时调用validationForm方法

例如 --

<input type="submit" value="Submit Contact Details">

或者

<input type="button" onclick="return validationForm();" value="Submit Contact Details">

你可以检查方法调用的次数，第一次是从onclick，第二次是从onsubmit。别忘了感谢（投票支持）。

从英语翻译为中文：在你的JS方法中删除Html注释后使用它。 - Zigri2612
警报仍然不会触发。 - Shannon
你把JS函数放在HTML注释中，像<!-- -->这样。请删除它的第一个。 - Zigri2612
@Zirgri2612 我在函数调用方面遇到了问题。 - Shannon
您的函数未在HTML页面中出现（因为被HTML注释掉了）。 - Zigri2612
在运行后，您没有在实际代码片段中看到alder。 - Zigri2612
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接