Как выполнить проверку HTML без добавления переменных проверки JavaScript?

Question

Я искал этот вопрос по всему сайту, но не смог найти нужный мне ответ. Я делаю форму, которая производит процент оценки и буквенную оценку на основе пользовательского ввода.

Однако мне также нужно проверить форму. В настоящее время функция вычисления работает нормально, но код HTML не проверяется перед отправкой, поэтому пользователь может отправить что угодно, и он все равно будет работать. Есть ли простой способ проверки без использования переменных проверки JavaScript?

Спасибо !!

HTML:

<p><b>Name: </b> <input type="text" size="20" id="student" required><span class="required">*</span></p>

<p><b>Assignment 1: </b><input type="number" id="assign1" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 2: </b><input type="number" id="assign2" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 3: </b><input type="number" id="assign3" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Assignment 4: </b><input type="number" id="assign4" size=10 value="" name="onlynumbers" min="0" max="25" required><span class="required">*</span></p>

<p><b>Midterm Exam: </b><input type="number" id="midterm" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Exam: </b><input type="number" id="final" size=10 value="" name="onlynumbers" min="0" max="100" required><span class="required">*</span></p>

<p><b>Final Project: </b><input type="number" id="project" size=10 value="" name="onlynumbers" min="0" max="100" required=""><span class="required">*</span></p>

<p>
<button onclick="calculator()">Submit</button>

<input type="reset" value="Reset">

</p>
</form>

JavaScript:

    function calculator()
    {
        var student=document.getElementById('student').value;
        var grade1=parseFloat(document.getElementById('assign1').value*1);
        var grade2=parseFloat(document.getElementById('assign2').value*1);
        var grade3=parseFloat(document.getElementById('assign3').value*1);
        var grade4=parseFloat(document.getElementById('assign4').value*1);
        var grade5=parseFloat(document.getElementById('midterm').value*1);
        var grade6=parseFloat(document.getElementById('final').value*1);
        var grade7=parseFloat(document.getElementById('project').value*1);
        var total=grade1 + grade2 + grade3 + grade4 + grade5 + grade6 + grade7;
        var average = total / 4

        document.getElementById('average').innerHTML = average;



        if ( average < 59.9 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is F.</h1>" );

            else if (average <= 63.9 && average >= 60 )
              document.writeln("<h1>Hello, "+ student +", your grade percent is " + average +"%, and your letter grade is D-.</h1>" );

            else if( average <= 66.9 && average >= 64 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is D.</h1>" );                        

            else if( average <= 69.9 && average >= 67 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is D+.</h1>" );

            else if( average <= 73.9 && average >= 70 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is C-.</h1>" );  

            else if( average <= 76.9 && average >= 74 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is C.</h1>" );

            else if( average <= 79.9 && average >= 77 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is C+.</h1>" );

            else if( average <= 83.9 && average >= 80 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is B-.</h1>" );

            else if( average <= 86.9 && average >= 84 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is B.</h1>" );

            else if( average <= 89.9 && average >= 87 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is B+.</h1>" );

            else if( average <= 93.9 && average >= 90 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is A.</h1>" );

            else if( average <= 100 && average >= 94 )
              document.writeln("<h1>Hello "+ student +", your grade percent is " + average +"%, and your letter grade is A+.</h1>" );

    }

Answer 1

Вы можете использовать Проверка формы HTML атрибуты, которые вообще не требуют JavaScript:

<form action="#" method="post">
  <input name="test" required>
  <input name="ssNumber" pattern="d{3}-d{2}-d{4}" required>
  <input type="email" required>
  <div>
    <button>Submit</button>
  </div>
</form>

Или вы можете просто зациклить поля формы HTML в JavaScript и проверить их по отдельности.

Однако, что бы вы ни делали, вы должны понимать, и любой метод проверки на стороне клиента можно легко обойти , поэтому любые проверки на стороне клиента должны быть снова выполнены на сервере после отправки данных. .

Теперь у вас есть несколько других проблем с вашим кодом, которые в основном связаны с избыточностью и простотой. Итак, вот переделанный пример. См. Встроенные комментарии для более подробной информации:

// Get all the element references you'll need repeated access to just once:
let btnCalc = document.querySelector("button[type='button']");
let btnSubmit = document.querySelector("button[type='submit']");
let form = document.querySelector("form");
let report = document.getElementById("reportingArea");
let rStudent = document.getElementById("rStudent");
let rAverage = document.getElementById("rAverage");
let rLetterGrade = document.getElementById("rLetterGrade");
let gradePercent = document.querySelector("input[name='gradePercent']");
let gradeLetter = document.querySelector("input[name='gradeLetter']");

// No need to set variables for each grade. Just gather all the grade inputs
// up into an Array for easy looping later.
let assignments = Array.prototype.slice.call(document.querySelectorAll(".assign"));

// Don't set variables to properties of elements, set them to the elements
// themselves so that if you decide later you want to look at some other
// aspect of the element, you don't have to query for the same element again later.
var student = document.getElementById('student');
let average =  document.getElementById('average');

// Set up event handlers in JavaScript, not with inline HTML event attributes
// And, you want to do your validation on the form's submit event, not the submit
// button's click event.
btnCalc.addEventListener("click", calculate);
form.addEventListener("reset", function(){
  // Hide the reporting area
  report.classList.add("hidden");
  
  // Show the Calc button and hide the submit button
  btnSubmit.classList.add("hidden");
  btnCalc.classList.remove("hidden");
});

function calculate() {
  const assignmentCount = 4;
  
  rStudent.textContent = student.value;    // Set up the reporting area details
  
  // Loop over the assignments and calculate the average
  let sum = 0;           
  assignments.forEach(function(assign){
    sum += +assign.value;
  });
  
  let average = (sum / assignmentCount).toFixed(2);
  rAverage.textContent = average;
   
  if(average < 59.9){
    rLetterGrade.textContent = "F";
  } else if (average <= 63.9 && average >= 60 ) {
    rLetterGrade.textContent = "D-";
  } else if( average <= 66.9 && average >= 64 ) {
    rLetterGrade.textContent = "D";
  }  else if( average <= 69.9 && average >= 67 ) {
    rLetterGrade.textContent = "D+";
  } else if( average <= 73.9 && average >= 70 ) {
    rLetterGrade.textContent = "C-";
  } else if( average <= 76.9 && average >= 74 ) {
    rLetterGrad.textContente = "C";
  } else if( average <= 79.9 && average >= 77 ) {
    rLetterGrade.textContent = "C+";
  }  else if( average <= 83.9 && average >= 80 ) {
    rLetterGrade.textContent = "B-";
  }  else if( average <= 86.9 && average >= 84 ) {
    rLetterGrade.textContent = "B";
  }  else if( average <= 89.9 && average >= 87 ) {
    rLetterGrad.textContente = "B+";
  }  else if( average <= 93.9 && average >= 90 ) {
    rLetterGrade.textContent = "A";
  }  else {
    rLetterGrade.textContent = "A+";
  }
  
  // Update the hidden form fields
  gradePercent.value = average;
  gradeLetter = rLetterGrade.textContent;  
  
  // Show the reporting area now that it's complete
  report.classList.remove("hidden");
  
  // Show the Submit button and hide the calculate button
  btnSubmit.classList.remove("hidden");
  btnCalc.classList.add("hidden");
}

/* All styling should be done with CSS, not in HTML */
.row { margin:.5em 0; }
label { display:inline-block; width:8em; font-weight:bold; }
.assign { width:10em; }
.hidden { display:none; }

/* Styling to show validity status of element */
input:invalid { box-shadow:0 0 1px rgba(255, 0, 0, .5); }
input:valid { box-shadow:0 0 1px rgba(0, 255,0, .5); }

<form>
  <!-- A paragraph is for a complete thought or idea, not just to put stuff on its own line.
       A div is for putting stuff on their own line. -->
  <div class="row">
    <!-- Use labels to associate a caption with a form field. -->
    <label for="student">Name: </label>
    <!--
         The default type of an input is text, so you don't need to say it.
         Also, the default size is 20, so you don't need to say that either.
         But, if you do want to style the element, do it with CSS. 
         And, simply add the 'required' attribute to make the field required.
         Also, every form field that will need to send its data to the server
         needs to have a 'name' attribute and value.
    -->
    <input id="student" name="student" required><span class="required">*</span>
  </div>

  <div>
    <label for="assign1">Assignment 1: </label>
    <!-- No need to specify the value="". That's the default. -->
    <input type="number" id="assign1" name="onlynumbers" min="0" max="25" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <label for="assign2">Assignment 2: </label>
    <input type="number" id="assign2" name="onlynumbers" min="0" max="25" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <label for="assign3">Assignment 3: </label>
    <input type="number" id="assign3" name="onlynumbers" min="0" max="25" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <label for="assign4">Assignment 4: </label>
    <input type="number" id="assign4" name="onlynumbers" min="0" max="25" class="assign" required>
    <span class="required">*</span>
  </div>  

  <div class="row">
    <label for="midterm">Midterm Exam: </label>
    <input type="number" id="midterm" name="onlynumbers" min="0" max="100" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <label for="final">Final Exam: </label>
    <input type="number" id="final"name="onlynumbers" min="0" max="100" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <label for="project">Final Project: </label>
    <input type="number" id="project" name="onlynumbers" min="0" max="100" class="assign" required>
    <span class="required">*</span>
  </div>

  <div class="row">
    <button type="button">Calculate</button>
    <button type="submit" class="hidden">Submit</button> <!-- Hidden until you calculate -->
    <input type="reset" value="Reset">
  </div>
  
  <input type="hidden" name="gradePercent">
  <input type="hidden" name="gradeLetter">
</form>

<div id="reportingArea" class="hidden">
  <!-- Instead of writing out largely the same thing over and over with document.writeln
       in JavaScript, just prepare a template area that we can inject the details into.
       We'll keep this section hidden until we're ready to show it. -->
  <h1>
    Hello <span id="rStudent"></span>, your grade percent is <span id="rAverage"></span>% 
    and your letter grade is <span id="rLetterGrade"></span>
  </h1>
</div>

Answer 2

Вы можете использовать событие onBlur для ввода. Вы можете использовать разные функции в зависимости от входа.

<input type="text" onblur="myFunction()">

Еще здесь https://www.w3schools.com/jsref/event_onblur.asp