Virtuemart Ajax动态验证用户名和邮箱

很多时候，我们注册的时候没有实时的验证邮箱，等点击注册之后，发现用户名或者邮箱已经被注册过了，导致我们很多东西都要再填一遍，如果加上实时验证，对于用户来说，无疑是提高了用户体验。下面我们来告诉你如何在virtuemart的注册页面添加ajax验证。

1. File Path: /administrator/components/com_virtuemart/html/checkout_register_form.php change

   $missing = vmGet( $_REQUEST, "missing", "" );
   
   if (!empty( $missing )) {
   	echo "<script type=\"text/javascript\">alert('".$VM_LANG->_('CONTACT_FORM_NC',false)."'); </script>\n";
   }
   

   to

   $missing = vmGet( $_REQUEST, "missing", "" );
   
   ?>
   
   <script language="javascript" type="text/javascript">
   	
   	function getUsername(){
   		var form = document.adminForm;
   		var uname = form.username.value;
   		
   		if( !$('username_ticker') )
   			$('username_input').innerHTML	= $('username_input').innerHTML + "<div id=\"username_ticker\" style=\"padding-top:10px;\"></div>";
   		
   		$('username_field').value	= uname;
   		
   		if( form.username.value.length < 3 ) {
   			$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Username : This input value is not valid.</span>';						
   		} else {
   			$('username_ticker').innerHTML	= "<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking";
   			var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=uname';
   			url = url + '&uname=' + form.username.value;
   			
   			new Ajax(url, {
   					method: 'get',
   					onComplete: function(x){
   						if(x == 1) {
   							$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This username is already registered.</span>';							
   						} else {
   							$('username_ticker').innerHTML = '<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The username \''+ $('username_field').value +'\' is free for registration: you can proceed.</span>';
   						}						
   					}					
   				}).request();
   		
   		}
   	}
   	
   	
   	function getEmail(){
   		
   		var form = document.adminForm;
   		var eadd = form.email.value;
   		
   		if( !$('email_ticker') )
   			$('email_input').innerHTML	= $('email_input').innerHTML + "<div id=\"email_ticker\" style=\"padding-top:10px;\"></div>";
   		
   		$('email_field').value	= eadd;
   		
   		if( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(form.email.value))) {
   			$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Email : This input value is not valid.</span>');						
   		} else {
   			$('email_ticker').setHTML("<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking");
   			var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=email';
   			url = url + '&email=' + form.email.value;
   			
   			new Ajax(url, {
   					method: 'get',
   					onComplete: function(x){
   						if(x == 1) {
   							$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This email is already registered.</span>');							
   						} else {
   							$('email_ticker').setHTML('<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The email \''+ $('email_field').value +'\' is free for registration: you can proceed.</span>');
   						}						
   					}					
   				}).request();
   
   		}
   	}
   	
   
   	
   </script>
   <?php
   
   if (!empty( $missing )) {
   	echo "<script type=\"text/javascript\">alert('".$VM_LANG->_('CONTACT_FORM_NC',false)."'); </script>\n";
   }
   

2. File Path: /administrator/components/com_virtuemart/classes/ps_userfield.php change

   case 'password':
   case 'password2':
   echo '<input type="password" id="'.$field->name.'_field" name="'.$field->name.'" size="30" class="inputbox" />'."\n";
   break;
   

   to

   case 'email':
   	$maxlength = $field->maxlength ? 'maxlength="'.$field->maxlength.'"' : '';
   	echo '<input type="text" id="'.$field->name.'_field" name="'.$field->name.'" size="'.$field->size.'" onchange="getEmail();" value="'. ($db->sf($field->name, true, false)?$db->sf($field->name, true, false):'') .'" class="inputbox" '.$maxlength . $readonly . ' />'."\n";
   	break;
   case 'username':
   	$maxlength = $field->maxlength ? 'maxlength="'.$field->maxlength.'"' : '';
   	echo '<input type="text" id="'.$field->name.'_field" name="'.$field->name.'" size="'.$field->size.'" onchange="getUsername();" value="'. ($db->sf($field->name, true, false)?$db->sf($field->name, true, false):'') .'" class="inputbox" '.$maxlength . $readonly . ' />'."\n";
   	break;
   

3. File Path: /administrator/components/com_virtuemart/classes/ps_userfield.php after this line

   /**
   * This is the most important part of this file
    * Here we print the field & its contents!
   */
   

   add the code below

   ?>
            
   <script language="javascript" type="text/javascript">		
   
   function getUsername(){
   	var form = document.adminForm;
   	var uname = form.username.value;
   	
   	if( !$('username_ticker') )
   		$('username_input').innerHTML	= $('username_input').innerHTML + "<div id=\"username_ticker\" style=\"padding-top:10px;\"></div>";
   	
   	$('username_field').value	= uname;
   	
   	if( form.username.value.length < 3 ) {
   		$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Username : This input value is not valid.</span>';						
   	} else {
   		$('username_ticker').innerHTML	= "<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking";
   		var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=uname';
   		url = url + '&uname=' + form.username.value;
   		
   		new Ajax(url, {
   				method: 'get',
   				onComplete: function(x){
   					if(x == 1) {
   						$('username_ticker').innerHTML = '<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This username is already registered.</span>';							
   					} else {
   						$('username_ticker').innerHTML = '<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The username \''+ $('username_field').value +'\' is free for registration: you can proceed.</span>';
   					}						
   				}					
   			}).request();
   	
   	}
   }
   
   
   function getEmail(){
   	
   	var form = document.adminForm;
   	var eadd = form.email.value;
   	
   	if( !$('email_ticker') )
   		$('email_input').innerHTML	= $('email_input').innerHTML + "<div id=\"email_ticker\" style=\"padding-top:10px;\"></div>";
   	
   	$('email_field').value	= eadd;
   	
   	if( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(form.email.value))) {
   		$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">Email : This input value is not valid.</span>');						
   	} else {
   		$('email_ticker').setHTML("<img src=\"<?php echo JURI::base()."images/wait.gif";?>\">&nbsp;Checking");
   		var url = 'index.php?option=com_virtuemart&tasked=chkuserinfo&format=raw&what=email';
   		url = url + '&email=' + form.email.value;
   		
   		new Ajax(url, {
   				method: 'get',
   				onComplete: function(x){
   					if(x == 1) {
   						$('email_ticker').setHTML('<span style="background:#FFFFCC;border:1px solid #CC0000;color:red;font-weight:bold;padding:5px 5px 5px 5px;">This email is already registered.</span>');							
   					} else {
   						$('email_ticker').setHTML('<span style="border:1px none transparent;color:green;padding:5px 5px 5px 5px;">The email \''+ $('email_field').value +'\' is free for registration: you can proceed.</span>');
   					}						
   				}					
   			}).request();
   
   	}
   }	
   </script>
   <?php
   

4. File Path: /components/com_virtuemart/virtuemart.php after this line

   global $mosConfig_absolute_path, $product_id, $vmInputFilter, $vmLogger;
   

   add the code below

   $tasked = JRequest::getVar( 'tasked' );
   
   if($tasked=="chkuserinfo"){
   	$database 	= & JFactory::getDBO();
   	$email 		= JRequest::getVar( 'email' );
   	$uname 		= JRequest::getVar( 'uname' );
   	
   	$what 		= JRequest::getVar( 'what' );
   	
   	$usercount 	= 0;
   	$emailcount = 0;
   	
   	
   	if($what == "uname"){
   		$database->setQuery("SELECT COUNT(*) FROM #__users WHERE username='$uname'");
   		$usercount	= $database->loadResult();
   		if($usercount)
   			echo "1";
   		else 
   			echo "0";
   		
   	} else if ($what == "email") {	
   		$database->setQuery("SELECT COUNT(*) FROM #__users WHERE email='$email'");
   		$emailcount	= $database->loadResult();	
   		
   		if($emailcount)
   			echo "1";
   		else 
   			echo "0";
   	}
   	
   	
   	die();
   }
   

Last, upload the wait.gif into the /images directory on your server.