用jquery做表单验证

用jquery的json格式:

以下是register.jsp中的内容

 

var nameFLG = false;//因为与Action中的不同步所以要设置两个全局变量控制布尔值的设置.
var emailFLG = false;//因为passwrod不是异步的所以不用设全局变量.
$(function() {  //在这个函数中调用下面的四个验证函数,只有四个全为真的时候才允许提交.
  /** 用户名校验 */
  $('#name').blur(function() {
  validateName();
  });
 
  /** Email 校验*/
  $('#email').blur(function() {
   validateEmail();
  });
 
 
  /** PASSWORD 校验 */
  $('#password').blur(function() {
   validatePassword();
  });
  /** PASSWORD 校验 */
  $('#rePassword').blur(function() {
   validateRepassword();
  });
 
  $('#registerForm').submit(function() {//只有四个全为真时才允许提交.
  
   if(nameFLG && emailFLG  && validatePassword() && validateRepassword()) {
    return true;
   } else {
    return false;
   }
  });
});

function validatePassword() {
 var passwd_reg = /^(/w){4,20}/ ;//  ***/代表正则表达式的开始,表示4-20位的任意字符/w可以匹配任何数字字符和英文字母还有下划线,等于[A-Za-z0-9_]
 var t_password = $('#password').val();
 if (!passwd_reg.exec(t_password)) {
  $('#infoPass').removeClass('d_default');
  $('#infoPass').addClass('d_err');
  $('#infoPass').text('最少4个字符,使用英文字母、符号或数字。 ');  
  return false;
 } else {
  $('#infoPass').removeClass('d_default');
  $('#infoPass').removeClass('d_err');
  $('#infoPass').addClass('d_ok');
  $('#infoPass').text('密码已经输入。 ');
  return true;
 }

}
function validateRepassword() {
 if ($('#password').val() != $('#rePassword').val()) {
  $('#infoRePass').removeClass('d_default');
  $('#infoRePass').addClass('d_err');
  $('#infoRePass').text('两次输入的密码不一致。 ');
  return false;
 } else {
  $('#infoRePass').removeClass('d_default');
  $('#infoRePass').removeClass('d_err');
  $('#infoRePass').addClass('d_ok');
  $('#infoRePass').text('重复密码输入正确。');
  return true;
 }
 
}

/**
 * email的校验方法
 */
function validateEmail() {
 var t_email =  $.trim($('#email').val());//得到id为email的文本框的值.并且是去掉空格后的值.
    if (t_email == '') {
     $('#infoEmail').removeClass('d_default');//将id为d_email的那个块中的名字为d_default的样式去掉.
  $('#infoEmail').addClass('d_err'); //将id为d_email的那个块中的样式设为名字为d_err的样式
  $('#infoEmail').text('请输入您的Email。');//将id为d_email的那个块中的内容设为请输入您的Email
  emailFLG = false;
  return;
    }
   
    var email_reg = /^[_/.0-9a-zA-Z+-]+@([0-9a-zA-Z]+[0-9a-zA-Z-]*/.)+[a-zA-Z]{2,4}$/;//验证email的格式.
    if(!email_reg.exec(t_email)) {
     $('#infoEmail').removeClass('d_default');
  $('#infoEmail').addClass('d_err');
  $('#infoEmail').text('请输入正确的email。');
     emailFLG = false;
  return;
    }
   
    $.post('ajaxAction.do', {'method':'checkEmail', 'email': t_email}, function(data) {
     if (data.ishave == 0) {
      $('#infoEmail').removeClass('d_default');
   $('#infoEmail').removeClass('d_err');
   $('#infoEmail').addClass('d_ok');
   $('#infoEmail').text('该Email可以使用。');
   emailFLG = true;
   return;
     }
     if (data.ishave == 1) {
      $('#infoEmail').removeClass('d_default');
   $('#infoEmail').removeClass('d_ok');
   $('#infoEmail').addClass('d_err');
   $('#infoEmail').text('该Email已经有人使用了。');
   emailFLG = false;
   return;
     }
    }, 'json');
}
/**
 * name的校验方法
 */
function validateName() {
 var t_name =  $.trim($('#name').val());
    if (t_name == '') {
     $('#infoName').removeClass('d_default');
  $('#infoName').addClass('d_err');
  $('#infoName').text('请输入您的登录名。');
  nameFLG = false;
  return;
    }
    $.post('ajaxAction.do', {'method':'checkName', 'name': t_name}, function(data) {
     if (data.ishave == 0) {
      $('#infoName').removeClass('d_default');
   $('#infoName').removeClass('d_err');
   $('#infoName').addClass('d_ok');
   $('#infoName').text('该会员名可以注册。');
   nameFLG = true;
   return;
     }
     if (data.ishave == 1) {
      $('#infoName').removeClass('d_default');
   $('#infoName').removeClass('d_ok');
   $('#infoName').addClass('d_err');
   $('#infoName').text('该会员名已经被占用了。');
   nameFLG = false;
   return;
     }
    }, 'json');

}

以下是Action后台中的内容.以email为例,name 同这个
public ActionForward checkEmail(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
  UserDaoImpl daoImpl = new UserDaoImpl();
  UserForm userForm = daoImpl.getUserByEmail(request.getParameter("email"));
  PrintWriter printWriter = response.getWriter();
  if (userForm == null) {
   printWriter.write("{'ishave':'0'}");
  } else {
   printWriter.write("{'ishave':'1'}");
  }
  printWriter.flush();
  printWriter.close();
  return null;
 }