How to use JavaScript for form validation

1. Data validity and security verification. 3 layers of verification.

• 1. Client js script verification

• 2. Server java-servlet server language verification

• 3. Database database constraints

2. onsubmit form submission event. The corresponding event of the form element is triggered by clicking the submit button. (type="submit")

• onsubmit will receive a true or false return value.

• Return true to submit the current form,

• Return false, do not submit the form

3. String object.

• Methods of string objects: String object.Method name();

• Commonly used methods:
  toLowerCase( ) Convert the string to lowercase
  toUpperCase() Convert the string to uppercase
  charAt(index) Return the character at the specified position
  indexOf(string,index) Find the first time in a specified string Appearance position
  substring(zindex1.index2) Returns the string located between the specified index index1 and index2, and includes the characters corresponding to index index1, excluding the characters corresponding to index index2

• Email format verification:

• 1. Use getElementById() to get the value of Email
  Use the string method indexOf() to determine whether the value of Email is Contains "@" and "." symbols.
  Decide whether to submit the form based on whether the function return value is true or false

  var mail=document.getElementById("email").value;
  if(mail.indexOf("@")==-1){
    alert("Email格式不正确\n必须包含@");
     return false;   
  }

• 2. Use the length attribute of the String object to verify the length of the password

  var pwd=document.getElementById("pwd").value;
  if(pwd.length<6){
        alert("密码必须等于或大于6个字符");
        return false; 
  }

• 3. Verify whether the passwords entered twice are consistent

  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
       alert("两次输入的密码不一致");
       return false;   
  }

• 4. Use the length attribute to obtain the text length, use the for loop and substring() method to truncate individual characters in sequence, and determine each Whether characters are numbers

  var user=document.getElementById("user").value;
      for(var i=0;i<user.length;i++){
      var j=user.substring(i,i+1)
      if(isNaN(j)==false){
         alert("姓名中不能包含数字");
         return false;   
      }
  }

5, properties, methods and events of text box objects

• Events:
  onblur loses focus and is triggered when the cursor leaves a text box
  onfocus gets focus and is triggered when the cursor enters a text box
  onkeypress A keyboard key is pressed and released

• Method:
  blur() Remove focus from the text field
  focus() Set focus in the text field , that is, get the mouse cursor
  select() Select the content in the text field

• Properties:

  1. Clear the initial content in the text box and set the border to Red:

  function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
    </tr>

  2. When the user enters an invalid email address, the content in the Email text box will be automatically selected and highlighted, prompting the user to re-enter

  if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
      alert("Email格式不正确\n必须包含符号@和.");
      document.getElementById("email").select();
      return false;
  }

  3. Prompt Email Cannot be empty

  function checkEmail(){
      var mail= document.getElementById ("email");
      var pID= document.getElementById ("pEmail");
      pID.innerHTML="";
      if(mail.value==""){
           pID.innerHTML="Email不能为空";
           return false;
      }
  }
  ……
  <input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
  <p class="red" id="pEmail"></p>

• ##id Set or return the id of the text field

• value Set or return the value of the value attribute of the text field

The above is the detailed content of How to use JavaScript for form validation. For more information, please follow other related articles on the PHP Chinese website!