寻找一种通过js验证表单的简单方法。
[英]Looking for a simple way to validate a form via js.
问题描述
**嘿，刚接触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 个解决方案
解决方案1
0 2018-04-21 00:41:04
这只是将第二个输入默认设置为disabled ，然后在第一个输入获得任何输入时删除该属性（或重新设置）的问题。
// 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"); } });
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" 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">
解决方案2
0 已采纳 2018-04-21 00:43:52
你可以这样做
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);
})
我尚未测试此代码，但它应该可以正常工作。
使用parsley js进行表单验证。 字母数字和密码确认
[英]Form validation with parsley js. Alphanumeric and password confirmation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.