用JavaScript验证表单并将其显示在页面上而不是警告框中

Validating a form with JavaScript and displaying them on the page rather than an alert box

本文关键字：警告 表单 验证 JavaScript 显示      更新时间：2023-09-26

我已经创建了一个表单，我需要用JavaScript或使用Jquery验证。如何验证下拉列表的值是否为"Title"，文本框是否为空，并将其显示在页面上，而不是一个警告框:

       <form action="" method="post" accept-charset="UTF-8" name="myForm">
       <option value="Title" id="title_3-0"  disabled selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select></div></div>

文本框:

    <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">

我也有一个按钮

开头:

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error").innerHTML += "First name must be filled out<br />";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error").innerHTML += "You need to select a title<br />";
    return_value = false;
  }
  return return_value;
}
</script>

<span id="error"></span>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<input type="submit" value="Submit">
</form>

如果你愿意，你也可以在每个字段的上面/下面放一个"error span元素"，并单独设置每个错误:

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error1").innerHTML = "First name must be filled out";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error2").innerHTML = "You need to select a title";
    return_value = false;
  }
  return return_value;
}
</script>

<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<span id="error1"></span>
Title: <input .... >
<span id="error2"></span>
<input type="submit" value="Submit">
</form>

由于您是新手，请查看这些链接并仔细阅读。它会引导你度过难关。总比我们把所有密码都给你强。因为这种类型的表单验证非常重要，因此您最好从头开始学习。

链接1

链接2

链接3(使用库)

Html:

<select id="ddl"> <option value="Title" id="title_3-0" selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select>
<input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
    <input type="button" value="Submit" id="btn"/>
    <span id="error"/>
JQuery: 

$('#btn').click(function (){
        if(($('#amf-input-firstname_4').val()=='') || ($("#ddl :selected").val() == 'Title'))
    {  
        $('#error').html('Please select title and enter name.');
    }
    else
    {
       $('#error').html('Success'); 
    }
    return false;
});

演示:

http://jsfiddle.net/8h8HF/

相关文章：