Maison > Article > interface Web > Utiliser JS pour implémenter la validation de formulaire (avec code)

Utiliser JS pour implémenter la validation de formulaire (avec code)

php中世界最好的语言original: 2018-04-17 15:14:312557parcourir

Cette fois, je vais vous présenter l'utilisation de JS pour implémenter la vérification de formulaire (avec code). Quelles sont les précautions à prendre pour utiliser JS pour implémenter la vérification de formulaire ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表单验证</title>
<style type="text/css">
<!--
body,td,th {
  font-size: 12px;
  color: #000000;
}
body {
  background-color: #CCCCCC;
  margin-left: 0px;
  margin-top: 0px;
}
a {
  font-size: 12px;
  color: #666600;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: #000099;
}
a:hover {
  text-decoration: underline;
  color: #6633FF;
}
a:active {
  text-decoration: none;
  color: #00FF00;
}
-->
</style>
  <script type="text/javascript">
    function checkusername()
    {
      var myform = document.getElementById("form1");
      var username = myform.username.value.length;
      if(username < 1||username>12)
      {
        errusername.innerHTML = "<font color=&#39;red&#39;>用户名不符合要求</font>";
        return false;
      }else{
        errusername.innerHTML = "<font color=&#39;green&#39;>用户名符合要求</font>";
        return true;
      }
    }
    function checkage()
    {
      var myform = document.getElementById("form1");
      var age = myform.age.value;
      if(age != parseInt(age))
      {
        errage.innerHTML = "<font color=&#39;red&#39;>年龄不符合要求</font>";
        return false;
      }else{
        errage.innerHTML = "<font color=&#39;green&#39;>年龄符合要求</font>";
        return true;
      }
    }
    function checkemail()
    {
      var myform = document.getElementById("form1");
      var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(!mail.test(myform.email.value))
      {  
        erremail.innerHTML = "<font color=&#39;red&#39;>email不符合要求</font>";
        return false;
      }else{
        erremail.innerHTML = "<font color=&#39;green&#39;>email符合要求</font>";
        return true;
      }
    }
    function checkform()
    {
      checkusername();checkage();checkemail();
      if(checkusername()&&checkage()&&checkemail())
      {
        return true;  
      }else{
        return false;
      }
    }
  </script>
</head>
<body alink="center">
 <form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">
<table width="777" border="0" cellpadding="1" cellspacing="1">
 <tr>
  <td colspan="3" ><p align="center">请输入你的注册信息</p></td>
 </tr>
 <tr>
  <td width="250" ><p align="right" >请输入你的用户名：</p></td>
  <td width="250"><p align="center">
     <input type="text" name="username" onblur="checkusername()" />  
   </p></td>
  <td><p id="errusername" align="center"></p></td>
 </tr>
 <tr>
  <td width="250"><p align="right">请输入你的年龄：</p></td>
  <td width="250"><p align="center" >
   <label>
   <input type="text" name="age" onblur="checkage()"/>
   </label>
  </p></td>
   <td><p align="center" id="errage"></p></td>
 </tr>
 <tr>
  <td width="250"><p align="right" >请输入你的EMAIL:</p></td>
  <td width="250"><p align="center" >
   <label>
   <input type="text" name="email" onblur="checkemail()" />
   </label>
  </p></td>
   <td><p align="center" id="erremail"></p></td>
 </tr>
 <tr>
  <td><p align="right">
   <label>
   <input type="submit" name="Submit" value="提交" />
   </label>
  </p></td>
   <td><p align="center">
    <label>
    <input type="reset" name="Submit2" value="重置" />
    </label>
   </p></td>
  <td><p align="center"></p></td>
 </tr>
</table>
 </form>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Débogage normal inter-domaines Vue

Explication détaillée de l'utilisation d'ajax et jsonp

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS utilise la méthode indexOf() pour implémenter la déduplication de tableauArticle suivant：JS utilise la méthode indexOf() pour implémenter la déduplication de tableau

Articles Liés

Voir plus