寻找一种通过js验证表单的简单方法。

时间：2018-04-21 00:14:18

标签： javascript html forms validation

**嘿，刚接触javascript的人（也许是一个月），我遇到了一个问题。我想通过js创建验证表单。不知道我可以从哪里开始。我考虑过禁用提交按钮，直到填写完所有表格但不知道如何做到这一点。任何帮助将不胜感激。谢谢。 ** 

body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px;
}

form {
  background: #fff;
  padding: 3em 2em 2em;
  max-width: 350px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: none;
}

p {
  margin: 0 0 2em 0;
  position: relative;
}

#moreInfo {
  font-size: 2em;
  position: relative;
  text-align: center;
}

/* Drop-down menu's */

#dropDown1 {
  width: 350px;
  color: grey;
  padding: 0.5em 0.5em;
  background: f5f5f5;
  border: 1px solid #e5e5e5;
}

#dropDown2 {
  width: 350px;
  padding: 0.5em 0.5em;
  color: grey;
  background: f5f5f5;
  border: 1px solid #e5e5e5;
}

label {
  display: block;
  font-size: 1.4em;
  margin: 0 0 0.5em;
  color: #333;
}

input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none;
}

#firstName {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  width: 150px;
  border-radius: 5px;
}

#lastName {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  width: 150px;
  border-radius: 5px;
}

#eMail {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  border-radius: 5px;
}

#telephone {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  width: 150px;
  padding: 0.2em 0.2em;
  border-radius: 5px;
}

#address {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 0.8em;
  padding: 8px;
  border-radius: 5px;
}

/* buttons */

#submitMore {
  background: #2080df;
  box-shadow: none;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 1em 0 0;
  outline: none;
  padding: 1em 0;
  text-shadow: 0 1px #68b25b;
}

#applyNow {
  background: #40bf80;
  box-shadow: none;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 2em 0 0;
  outline: none;
  padding: 1em 0;
  text-shadow: 0 1px #68b25b;
}

#para1 {
  text-align: left;
  color: #dadada;
  padding: ;
}

#OReo {
  text-align: center;
  color: #dadada;
  font-size: 1em;
}



/*      Validation Form Response      */

input[type="text"],
input[type="firstName"] {
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	font-size: 1.6em;
	padding: .8em .5em;
	border-radius: 5px;
}
<body>
  <form action="#" method="post">

    <!-- drop-down -->
    <h1 id="moreInfo">Request More Information</h1>

    <p>
      <label for="degreeType">What Degree would you like?*</label>
      <select id="dropDown1" name="dropDown1">
    <option id="dropDown1" selected="selected">Select an option</option>
    <option value="gen2">Example 1</option>
    <option value="gen3">Example 2</option>
    <option value="gen4">Example 3</option>
  </select>
    </p>

    <p>
      <label for="selectDegree">What would you like to study?*<label>
      <select id="dropDown2" name="dropDown2">
    <option selected="selected">Select degree type above</option>
    <option value="gen2">Example 1</option>
    <option value="gen3">Example 2</option>
    <option value="gen4">Example 3</option>
</select>
  </p>
        <div class="firstNlast">
        <p>
        <label for="firstName">First Name*<label>
        <input id="firstName" name="firstName" type="firstName">
          <span class="left">Please enter your name</span>
        </p>
          
          <p>
        <label for="lastName">Last Name*<label>
        <input id="lastName" name="lastName" type="lastName">
          <span class="right">Please enter your last name</span>
        </p>
            </div>
          
          <p>
        <label for="eMail">Email*<label>
        <input id="eMail" name="eMail" type="text">
          <span class="left">Please enter your email</span>
        </p>
         
          <p>
        <label for="telephone">Telephone*<label>
        <input id="telephone" name="telephone" type="text">
          <span class="right">Please enter your phone number</span>
        </p>
         
          <p>
        <label for="address">Address*<label>
        <input id="address" name="address" type="text" placeholder="Enter a location">
        <span class="left">Please enter your address</span>
        </p>
        
         <p>
				<input type="submit" value="Tell Me More" id="submitMore">
          </p>
          <p id="para1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices pulvinar scelerisque. Curabitur auctor faucibus est, ut lobortis ante tempus sit amet. Phasellus fermentum aliquet turpis, at tempus tortor euismod nec. Pellentesque ligula nunc, maximus et venenatis ac, tempor vel sem.
			    </p>
          <h1 id="OReo">----------  OR  -------------</h1>
          <input type="submit" value="Apply Now" id="applyNow">

2 个答案:

答案 0 :(得分：0)

这只是默认情况下将第二个输入设置为disabled，然后在第一个输入获得任何输入时删除该属性（或重新设置）。

＆＃13;
＆＃13; 
// Get references to the two inputs
var firstInput = document.getElementById("firstName");
var secondInput = document.getElementById("lastName");

// Set up an event handler for the frist input for when it gets content
firstInput.addEventListener("input", function(){

  // Remove or set the disabled attribute based on the value of the fist input
  if(this.value !== ""){
    secondInput.removeAttribute("disabled");
  } else {
    secondInput.setAttribute("disabled", "disabled");
  }
});
＆＃13; 
body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px;
}

form {
  background: #fff;
  padding: 3em 2em 2em;
  max-width: 350px;
  margin: 100px auto 0;
  box-shadow: 0 0 1em #222;
  border-radius: none;
}

p {
  margin: 0 0 2em 0;
  position: relative;
}

#moreInfo {
  font-size: 2em;
  position: relative;
  text-align: center;
}

/* Drop-down menu's */

#dropDown1 {
  width: 350px;
  color: grey;
  padding: 0.5em 0.5em;
  background: f5f5f5;
  border: 1px solid #e5e5e5;
}

#dropDown2 {
  width: 350px;
  padding: 0.5em 0.5em;
  color: grey;
  background: f5f5f5;
  border: 1px solid #e5e5e5;
}

label {
  display: block;
  font-size: 1.4em;
  margin: 0 0 0.5em;
  color: #333;
}

input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none;
}

#firstName {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  width: 150px;
  border-radius: 5px;
}

#lastName {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  width: 150px;
  border-radius: 5px;
}

#eMail {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  padding: 0.2em 0.2em;
  border-radius: 5px;
}

#telephone {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 1em;
  width: 150px;
  padding: 0.2em 0.2em;
  border-radius: 5px;
}

#address {
  background: f5f5f5;
  border: 1px solid #e5e5e5;
  font-size: 0.8em;
  padding: 8px;
  border-radius: 5px;
}

/* buttons */

#submitMore {
  background: #2080df;
  box-shadow: none;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 1em 0 0;
  outline: none;
  padding: 1em 0;
  text-shadow: 0 1px #68b25b;
}

#applyNow {
  background: #40bf80;
  box-shadow: none;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 2em;
  line-height: 1.6em;
  margin: 2em 0 0;
  outline: none;
  padding: 1em 0;
  text-shadow: 0 1px #68b25b;
}

#para1 {
  text-align: left;
  color: #dadada;
  padding: ;
}

#OReo {
  text-align: center;
  color: #dadada;
  font-size: 1em;
}



/*      Validation Form Response      */

input[type="text"],
input[type="firstName"] {
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	font-size: 1.6em;
	padding: .8em .5em;
	border-radius: 5px;
}
＆＃13; 
<body>
  <form action="#" method="post">

    <!-- drop-down -->
    <h1 id="moreInfo">Request More Information</h1>

    <p>
      <label for="degreeType">What Degree would you like?*</label>
      <select id="dropDown1" name="dropDown1">
    <option id="dropDown1" selected="selected">Select an option</option>
    <option value="gen2">Example 1</option>
    <option value="gen3">Example 2</option>
    <option value="gen4">Example 3</option>
  </select>
    </p>

    <p>
      <label for="selectDegree">What would you like to study?*<label>
      <select id="dropDown2" name="dropDown2">
    <option selected="selected">Select degree type above</option>
    <option value="gen2">Example 1</option>
    <option value="gen3">Example 2</option>
    <option value="gen4">Example 3</option>
</select>
  </p>
        <div class="firstNlast">
        <p>
        <label for="firstName">First Name*<label>
        <input id="firstName" name="firstName" type="firstName">
          <span class="left">Please enter your name</span>
        </p>
          
          <p>
        <label for="lastName">Last Name*<label>
        <input id="lastName" name="lastName" type="lastName" disabled> <!-- Disabled by default -->
          <span class="right">Please enter your last name</span>
        </p>
            </div>
          
          <p>
        <label for="eMail">Email*<label>
        <input id="eMail" name="eMail" type="text">
          <span class="left">Please enter your email</span>
        </p>
         
          <p>
        <label for="telephone">Telephone*<label>
        <input id="telephone" name="telephone" type="text">
          <span class="right">Please enter your phone number</span>
        </p>
         
          <p>
        <label for="address">Address*<label>
        <input id="address" name="address" type="text" placeholder="Enter a location">
        <span class="left">Please enter your address</span>
        </p>
        
         <p>
				<input type="submit" value="Tell Me More" id="submitMore">
          </p>
          <p id="para1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices pulvinar scelerisque. Curabitur auctor faucibus est, ut lobortis ante tempus sit amet. Phasellus fermentum aliquet turpis, at tempus tortor euismod nec. Pellentesque ligula nunc, maximus et venenatis ac, tempor vel sem.
			    </p>
          <h1 id="OReo">----------  OR  -------------</h1>
          <input type="submit" value="Apply Now" id="applyNow">
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你可以这样做

function onInput() {
  //Get input value
  var inputValue = document.getElementById("field1").value;
  //See if the input value is empty or not
  if (inputValue.length > 0) {
    document.getElementById("field2").setAttribute("disabled", false);
  } else {
    document.getElementById('field2').disabled = true;
  }
}

添加一个侦听器：

<input type="text" id="field1" oninput="onInput()">

如果你正在使用Jquery：

<input type="text" id="field1">

你的脚本在这里（相同的逻辑）：

$(document).on('keypress', '#field1', function(){
  var inputValue = $('#field1').val();
  if (inputValue.length > 0) $('#field2').prop('disabled', true);
  else $('#field2').prop('disabled', false);
})

我还没有对此代码进行测试，但它应该按预期工作。

相关问题
最新问题