javascript 一个完整的表单验证实例
Jun 01, 2016 am 09:55 AM<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>
简单讲一下js语法:
document.info.fname.value
这个js表示获取name为info表单里面name是fname的input的值。
其他方法类似。
你可以将代码复制到这里运行一把

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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

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

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

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
