小贝子编程

如何在javascript验证后显示成功消息



在js验证正确后，我正在尝试生成一个from with success消息。对于成功消息，我使用引导程序警报。我制作了两个文件，第一个是带有公共验证的文件，我在其中放置了所有验证函数，第二个是带有一个检查有效性是否为真的函数。在那里，我尝试设置一个条件，如果valid为true，然后显示make success消息，但它不起作用。我应该使用什么样的条件才能使它出现？

表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/validationCommon.js"></script>
<script src="js/validationMovieForm.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet"> 
<link rel="stylesheet" href="style.css">
<title>Movie Form</title>
</head>
<body>
<div id="info" class="info container-fluid">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Success! You've added movie.
</div>
</div>
<main>
<form class="form" novalidate onsubmit="return validateForm();">


<label for="movieName">Movie name: *</label>
<input type="text" name="movieName"  id="movieName" placeholder="2-60 letters"/>
<span id="errorMovieName" class="error-text"></span>

<label for="Date">Year of release: *</label>
<input  type="number"  name="premiere"   id="premiere" placeholder=" from 1888 to 2021"  />
<span id="errorPremiere" class="error-text"></span>

<label for="Type">Type: *</label>
<input  type="text"  name="type"  id="type" placeholder="2-30 letters"/>
<span id="errorType" class="error-text"></span>
<label for="Price">Price/week: *</label>
<input  type="number"  name="price"   id="price" placeholder="Price from 1.00 to 49.99"/>
<span id="errorPrice" class="error-text"></span>  



<div class="f-buttons">
<p id="errorsSummary" class="error-text"></p>
<button id="subbut" type="submit" class="btn btn-success subbut" style="margin-right: 4rem;">Add</button>
</div>
</form>
</main>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- <script>
$(document).ready(function(){
$('.subbut').click(function(){
$('.info').show()
}) 
});
</script> -->
</body>
</html>

样式

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form{
margin: 50px;
display: block;
width: 300px;
}
.form select,
.form input[type="text"],
.form input[type="number"] {
border: 1px solid #000;
color: #000;
border-radius: 5px;
padding: 0.5rem;
width: 100%;
}
.form label {
display: block;
margin-bottom: 0.5em;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
}
.form input.error-input,
.form select.error-input {
border: 3px solid #e74c3c;
}
.error-text {
display: block;
font-size: .85em;
line-height: 1rem;
margin-left: 10px;
color: #e74c3c;
}
.info {
display: none;
}

validationCommon.js

function resetErrors(inputs, errorTexts, errorInfo) {
for(let i=0; i<inputs.length; i++) {
inputs[i].classList.remove("error-input");
}
for(let i=0; i<errorTexts.length; i++) {
errorTexts[i].innerText = "";
}
errorInfo.innerText = "";
}
function checkRequired(value) {
if (!value) {
return false;
}
value = value.toString().trim();
if (value === "") {
return false;
}
return true;
}
function checkTextLengthRange(value, min, max) {
if (!value) {
return false;
}
value = value.toString().trim();
const length = value.length;
if (max && length > max) {
return false;
}
if (min && length < min) {
return false;
}
return true;
}

function checkYearBetween(value){
if (!value) {
return false;
}
value = value.toString().trim();
const regx = /^s*(188[8-9]|18[2-9]d|19dd|200d|201[0-9]|202[0-1])s*$/;
return regx.test(value);
}
function checkPriceRange(value) {
if (!value) {
return false;
}
value = value.toString().trim();
const regx = /^s*(([1-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9])+.d{1,2})s*$/;
return regx.test(value);
}

验证MovieForm.js


function validateForm() {
const form = document.querySelector('form');
const message = document.getElementById('info');
const movieNameInput = document.getElementById('movieName');
const premiereInput = document.getElementById('premiere');
const typeInput = document.getElementById('type');
const priceInput = document.getElementById('price');

const errorMovieName = document.getElementById('errorMovieName');
const errorPremiere = document.getElementById('errorPremiere');
const errorType = document.getElementById('errorType');
const errorPrice = document.getElementById('errorPrice');
const errorsSummary = document.getElementById('errorsSummary');

let valid = true;
resetErrors([movieNameInput, premiereInput, typeInput, priceInput], [errorMovieName, errorPremiere, errorType, errorPrice], errorsSummary);
if (!checkRequired(movieNameInput.value)) {
valid = false;
movieNameInput.classList.add("error-input");
errorMovieName.innerText = "This field is required";
} else if (!checkTextLengthRange(movieNameInput.value, 2, 60)) {
valid = false;
movieNameInput.classList.add("error-input");
errorMovieName.innerText = "You should enter from 2 to 60 letters";
}
if (!checkYearBetween(premiereInput.value)) {
valid = false;
premiereInput.classList.add("error-input");
errorPremiere.innerText = "This field should be number from 1888 to 2021";
}
if (!checkRequired(typeInput.value)) {
valid = false;
typeInput.classList.add("error-input");
errorType.innerText = "This field is required";
} else if (!checkTextLengthRange(typeInput.value, 2, 30)) {
valid = false;
typeInput.classList.add("error-input");
errorType.innerText = "You should enter from 2 to 30 letters";
}
if (!checkPriceRange(priceInput.value)) {
valid = false;
priceInput.classList.add("error-input");
errorPrice.innerText = "Price must be a number from 1.00 to 49.99";
}

if(valid){
form.addEventListener('submit', (e) =>{
e.preventDefault();
message.classList.add('show');
});
}
if (!valid) {
errorsSummary.innerText = "Form contains errors";
}

return valid;     


}
  • 不用在CSS中将.infodiv手动设置为display:none;，只需使用引导类.d-none即可
  • 验证成功后，不添加.show类，只删除.d-none类即可
  • 成功验证后，您将添加一个新的事件处理程序，这意味着表单将被第二次提交，以便运行任何新代码。因此，只需移除额外的事件处理程序
  • 最后，您的表单将被提交，这将导致在成功验证时重新加载页面(因为您将返回valid，这将是真的(。这意味着无论如何都不会显示您的infodiv。您需要返回false以防止表单实际提交

// validationCommon.js
function resetErrors(inputs, errorTexts, errorInfo) {
for (let i = 0; i < inputs.length; i++) {
inputs[i].classList.remove("error-input");
}
for (let i = 0; i < errorTexts.length; i++) {
errorTexts[i].innerText = "";
}
errorInfo.innerText = "";
}
function checkRequired(value) {
if (!value) {
return false;
}
value = value.toString().trim();
if (value === "") {
return false;
}
return true;
}
function checkTextLengthRange(value, min, max) {
if (!value) {
return false;
}
value = value.toString().trim();
const length = value.length;
if (max && length > max) {
return false;
}
if (min && length < min) {
return false;
}
return true;
}

function checkYearBetween(value) {
if (!value) {
return false;
}
value = value.toString().trim();
const regx = /^s*(188[8-9]|18[2-9]d|19dd|200d|201[0-9]|202[0-1])s*$/;
return regx.test(value);
}
function checkPriceRange(value) {
if (!value) {
return false;
}
value = value.toString().trim();
const regx = /^s*(([1-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9])+.d{1,2})s*$/;
return regx.test(value);
}
// validationMovieForm.js
function validateForm() {
const form = document.querySelector('form');
const message = document.getElementById('info');
const movieNameInput = document.getElementById('movieName');
const premiereInput = document.getElementById('premiere');
const typeInput = document.getElementById('type');
const priceInput = document.getElementById('price');
const errorMovieName = document.getElementById('errorMovieName');
const errorPremiere = document.getElementById('errorPremiere');
const errorType = document.getElementById('errorType');
const errorPrice = document.getElementById('errorPrice');
const errorsSummary = document.getElementById('errorsSummary');
let valid = true;
resetErrors([movieNameInput, premiereInput, typeInput, priceInput], [errorMovieName, errorPremiere, errorType, errorPrice], errorsSummary);
if (!checkRequired(movieNameInput.value)) {
valid = false;
movieNameInput.classList.add("error-input");
errorMovieName.innerText = "This field is required";
} else if (!checkTextLengthRange(movieNameInput.value, 2, 60)) {
valid = false;
movieNameInput.classList.add("error-input");
errorMovieName.innerText = "You should enter from 2 to 60 letters";
}
if (!checkYearBetween(premiereInput.value)) {
valid = false;
premiereInput.classList.add("error-input");
errorPremiere.innerText = "This field should be number from 1888 to 2021";
}
if (!checkRequired(typeInput.value)) {
valid = false;
typeInput.classList.add("error-input");
errorType.innerText = "This field is required";
} else if (!checkTextLengthRange(typeInput.value, 2, 30)) {
valid = false;
typeInput.classList.add("error-input");
errorType.innerText = "You should enter from 2 to 30 letters";
}
if (!checkPriceRange(priceInput.value)) {
valid = false;
priceInput.classList.add("error-input");
errorPrice.innerText = "Price must be a number from 1.00 to 49.99";
}

if (valid) {
message.classList.remove('d-none');
}
if (!valid) {
errorsSummary.innerText = "Form contains errors";
}
// return valid;
return false;

}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form {
margin: 50px;
display: block;
width: 300px;
}
.form select,
.form input[type="text"],
.form input[type="number"] {
border: 1px solid #000;
color: #000;
border-radius: 5px;
padding: 0.5rem;
width: 100%;
}
.form label {
display: block;
margin-bottom: 0.5em;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
}
.form input.error-input,
.form select.error-input {
border: 3px solid #e74c3c;
}
.error-text {
display: block;
font-size: .85em;
line-height: 1rem;
margin-left: 10px;
color: #e74c3c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
<div id="info" class="info container-fluid d-none">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Success! You've added movie.
</div>
</div>
<main>
<form class="form" novalidate onsubmit="return validateForm();">

<label for="movieName">Movie name: *</label>
<input type="text" name="movieName" id="movieName" placeholder="2-60 letters" />
<span id="errorMovieName" class="error-text"></span>
<label for="Date">Year of release: *</label>
<input type="number" name="premiere" id="premiere" placeholder=" from 1888 to 2021" />
<span id="errorPremiere" class="error-text"></span>
<label for="Type">Type: *</label>
<input type="text" name="type" id="type" placeholder="2-30 letters" />
<span id="errorType" class="error-text"></span>
<label for="Price">Price/week: *</label>
<input type="number" name="price" id="price" placeholder="Price from 1.00 to 49.99" />
<span id="errorPrice" class="error-text"></span>

<div class="f-buttons">
<p id="errorsSummary" class="error-text"></p>
<button id="subbut" type="submit" class="btn btn-success subbut" style="margin-right: 4rem;">Add</button>
</div>
</form>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

使用js将css添加到成功文本中：
show:

/* element */ .style.display = 'block';

隐藏：

/* element */ .style.display = 'none';

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium