Related explanations about JavaScript form validation

JavaScript form verification plays an important role in website login and registration, so this article will provide some detailed understanding of it.

JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before the data is sent to the server.

Form data often requires the use of JavaScript to verify its correctness:

Verify whether the form data is empty?

Verify whether the input is a correct email address?

Verify whether the date is entered correctly?

Verify whether the form input content is numeric?

Required (or required) items

The following function is used to check whether the user has filled in the required (or required) items in the form. If it is required or the required field is empty, then the warning box will pop up, and the return value of the function is false, otherwise the return value of the function is true (meaning there is no problem with the data):

function validateForm(){
  var x=document.forms["myForm"]["fname"].value;  if (x==null || x=="")
  {
    alert("姓必须填写");    return false;  }}

The above function is in the form Called when the form is submitted:

Example

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">姓: <input type="text" name="fname"><input type="submit" value="提交"></form>

E-mail Validation

The following function checks whether the entered data conforms to the basic syntax of an email address.

This means that the input data must contain the @ symbol and the period (.). At the same time, @ cannot be the first character of the email address, and there must be at least one period after @:

function validateForm(){
  var x=document.forms["myForm"]["email"].value;  var atpos=x.indexOf("@");  var dotpos=x.lastIndexOf(".");  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");    return false;  }}

The following is the complete code together with the HTML form:

Example

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交"></form>

This article explains some related knowledge of JavaScript form validation. For more learning materials, please pay attention to the php Chinese website.

Related recommendations:

Related knowledge and usage of JavaScript Boolean (Boolean) objects

Understanding and use of JavaScript Cookies

Practical application method of JavaScript Switch statement

The above is the detailed content of Related explanations about JavaScript form validation. For more information, please follow other related articles on the PHP Chinese website!