友迪情感
您的当前位置:首页javascript一个完整的表单验证实例

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

来源:友迪情感


 
 
 
 function validatePersonalInfo(){
 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;
 }
 }
 
 
 
 

简单讲一下js语法:

document.info.fname.value

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

其他方法类似。

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

显示全文