Maison interface Web js tutoriel javascript 一个完整的表单验证实例

javascript 一个完整的表单验证实例

Jun 01, 2016 am 09:55 AM
js 表单 验证

<code class="language-html"> 
    
    <script language="JavaScript">
    function validatePersonalInfo(){<!--  w ww. j a  va 2s . c o  m-->
      var _first = document.info.fname.value;
      var _last = document.info.lname.value;
      var _street = document.info.street.value;
      var _city = document.info.city.value;
      var _zip = document.info.zip.value;
      var _phone = document.info.phone.value;
      var _email = document.info.email.value;

      if(_first.toString() == ""){console.log("Please enter a first name.");}
      if(_last.toString() == ""){console.log("Please enter a last name.");}
      if(_street.toString() == ""){console.log("Please enter your street name.");}
      if(_city.toString() == ""){console.log("Please enter your city.");}
      if(_zip.toString() == ""){console.log("Please enter your zip.");}
      if(_phone.toString() == ""){console.log("Please enter your phone number.");}
      if(_email.toString() == ""){console.log("Please enter your email.");}
      

        var checkZip = checkNum(5);
        var phoneInput = document.info.phone.value;
        var validPhone = false;
        var validZip = false;
         if(checkZip == true){
            validZip = true;
         }
         else{
           console.log("Invalid Zip Code" + validZip);
         }
         if(!checkPhone(phoneInput)){
               console.log("Phone number is invalid." + validPhone);
            }
         else{
             validPhone = true;
         }
         if(validZip && validPhone){
            console.log("Your form has been verified");
         }
    }
    
    // Strips hyphens out of phone number and verifies that
    // phone number is valid. Any phone number in the format
    // xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid

    function checkPhone(str){
      var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/;
       return regexp.test(str);
    }
    function checkNum(length){
      var zipEntry = document.info.zip.value;
      var zipNum = parseInt(zipEntry, 10);
      if (document.info.zip.value.length == length){
        if(zipNum != 0 && isNaN(zipNum) == false){
          return true;
        }
        else {
          return false;
        }
      }
      else {
        return false;
      }
    }
    </script>
    
    
    <form name="info" action="" method="post">
    <table>
    <tr>
<td align="left">First Name:</td>
    <td align="left">
    <input type="text" name="fname" size="15">
    Last Name:
    <input type="text" name="lname" size="20">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Street:</td>
    <td align="left">
    <input type="text" name="street" size="30">
</td>
    </tr>
    <br>
    <tr>
    <td align="left">City:</td>
    <td align="left">
    <input type="text" name="city" size="15">
    State:
    <select name="state">
    <option value="AL">AL
    </option>
<option value="AK">AK
    </option>
<option value="AZ">AZ
    </option></select>
    Zip:
    <input type="text" name="zip" size="7">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Phone (w/area code):</td>
    <td align="left">
    <input type="text" name="phone" size="20">
</td>
    </tr>
    <br>
    <tr>
<td align="left">Email:</td>
    <td align="left">
    <input type="text" name="email" size="20">
</td>
    </tr>
    <br>
    </table>
    <input type="button" value="Submit" onclick="validatePersonalInfo()">
    </form>

</code>
Copier après la connexion

简单讲一下js语法:

document.info.fname.value

这个js表示获取name为info表单里面name是fname的input的值。

其他方法类似。

你可以将代码复制到这里运行一把

Déclaration de ce site Web
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 chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment vérifier la signature dans un PDF Comment vérifier la signature dans un PDF Feb 18, 2024 pm 05:33 PM

Comment vérifier la signature dans un PDF

Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Mar 25, 2024 pm 01:26 PM

Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS

Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Mar 27, 2024 am 08:21 AM

Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Dec 17, 2023 am 08:08 AM

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS

Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte Nov 21, 2023 am 11:11 AM

Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte

See all articles