Home >Web Front-end >JS Tutorial >javascript 一个完整的表单验证实例
<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的值。
其他方法类似。
你可以将代码复制到这里运行一把