Validating Common Form Input - Part 1

1.准备测试的Form

1. <form onsubmit="return validate(this);"> 
2.   Username<br /> 
3.   <input type="text" name="username" value="" /><br /> 
4.   Password<br /> 
5.   <input type="password" name="password1" value="" /><br /> 
6.   Repeat password<br /> 
7.   <input type="password" name="password1" value="" /><br /> 
8.   Name<br /> 
9.   <input type="text" name="name" value="" /><br /> 
10.   Address<br /> 
11.   <input type="text" name="address" value="" /><br /> 
12.   Phone<br /> 
13.   <input type="text" name="phone" value="" /><br /> 
14.   Email<br /> 
15.   <input type="text" name="email" value="" /><br /> 
16.   Website<br /> 
17.   <input type="text" name="website" value="" /><br /> 
18.   <input type="Submit" value="Submit" /> 
19. </form> 

2.为form 添加验证事件

1. <form onsubmit="return validate(this);"> 
2. ...  
3. </form> 

3.一个简单的验证方法(验证单个元素不能为空)

1. function validate(form) {  
2.   // If no value in Username input field  
3.   if(!form.elements.username.value)  
4.     return false;  
5.   else 
6.     return true;  
7. }  

4.第二个验证方法(验证所有元素不能为空)

1. function validate(form) {  
2.   // For every input field in the form  
3.   for(var i=0; i<form.elements.length; i++) {  
4.     // If the input field is empty  
5.     if(!form.elements[i].value)  
6.       return false;  
7.   }  
8.   return true;  
9. }  

 

本文转自 randy_shandong 51CTO博客，原文链接：http://blog.51cto.com/dba10g/456621，如需转载请自行联系原作者