jquery+jquery.validate用户注册范例 _Web前端

jquery+jquery.validate用户注册实例

1.页面端my――userlogin.jsp主要代码

script type="text/javascript" src="js/jquery-1.5.2.js"></script>

label.error

? ? ? ? {

? ? ? ? ? ? background: url(images/error.png) no-repeat 0px 0px;

? ? ? ? ? ? color: Red;

? ? ? ? ? ? padding-left: 20px;

? ? ? ? }

? ? ? ? label.success

? ? ? ? { ? ? ? ? ? ?

? ? ? ? ? ?background:url("images/checked.gif") no-repeat 0px 0px;?

? ? ? ? }

? ? ? ? input.error

? ? ? ? {

? ? ? ? ? ? border: dashed 1px red;

? ? ? ? }

</style> ?

</head>

<tr>

</tr>

<tr>

?<td height="61" colspan="4"><img src="images/yonghuzhucexiaoren.gif" width="1000" height="61" /></td>

?</tr>

<tr>

? ?<td width="596" height="372" align="center" valign="top" bgcolor="#FFFFFF"><table width="572" height="357" border="0" cellspacing="0">

? ? ? ? ?<tr>

? ? ? ? ? ?<td align="right">用  户  名 </td>

? ? ? ? ? ?<td colspan="4" align="left"><input name="username" id="username" ?type="text" class="" /></td>

? ? ? ? ?</tr>

? ? ? ? ?<tr>

? ? ? ? ? ?<td align="right">密       码：</td>

? ? ? ? ? ?<td colspan="4" align="left"><input name="userpwd" id="userpwd" type="password" class="" /></td>

? ? ? ? ? ?

? ? ? ? ?</tr>

? ? ? ? ?<tr>

? ? ? ? ? ?<td align="right">确认密码：</td>

? ? ? ? ? ?<td colspan="4" align="left"><input name="userpwd1" id="userpwd1" type="password" class="" /></td>

? ? ? ? ?

? ? ? ? ?</tr>

? ? ? ? ?<tr>

? ? ? ? ? ?<td align="right">性       别：</td>

? ? ? ? ? ?<td width="25" align="left"><input ?name="sex" id="man" value="m" type="radio" class="" /></td>

? ? ? ? ? ?<td width="69" align="left">男</td>

? ? ? ? ? ?<td width="25"><input name="sex" ?id="women" value="f" type="radio" class="" /></td>

? ? ? ? ? ?<td width="83" align="left">女</td>

? ? ? ? ? ?<td align="left">

? ? ? ? ?</tr>

? ? ? ? ?<tr>

? ? ? ? ? ?<td align="right">年       龄：</td>

? ? ? ? ? ?<td colspan="4" align="left"><input name="age" id="age" type="text" class="" /></td>

? ? ? ? ? ?<td align="left">

? ? ? ? ?</tr>

? ? ? ? ?<tr>

? ? ? ? ? ?<td> </td>

? ? ? ? ? ?<td height="40" colspan="3" align="left"><img style="cursor:pointer" src="images/tijiao.gif" width="75" height="29" border="0"" id="tijiao"/></td>

? ? ? ? ? ?<td align="left"><img style="cursor:pointer" src="images/guanbi.gif" width="75" height="29" border="0" id="reset"/></td>

? ? ? ? ? ?<td> </td>

? ? ? ? ?</tr>

? ? ? ?</table></td>

? ?<td width="382" height="372" bgcolor="#FFFFFF"> </td>

? ?<td width="10" height="372" align="right" background="images/youshuxian.gif" bgcolor="#FFFFFF"> </td>

</tr>

<tr>

</tr>

</table>

2.mylogin.js的代码

$().ready(function(){

var validate=$("#loginform").validate({

event: "keyup" ,

rules:{

username:{

required:true,

minlength:3,

remote:"zhuce"

userpwd:{

required:true,

minlength:5

userpwd1:{

required:true,

minlength:5,

equalTo:"#userpwd"

sex:{

required:true

age:{

required:true,

range:[0,120]

}

messages:{

username:{

required:"请输入帐号",

minlength: jQuery.format("用户名长度至少为 {0}!"),

remote:jQuery.format("{0}已经存在")

userpwd:{

required:"请输入密码",

minlength: jQuery.format("密码至少输入 {0} 字符!")

userpwd1:{

required:"请输入确认密码",

minlength: jQuery.format("确认密码至少输入 {0} 字符!"),

equalTo:"确认密码与原密码不一致"

sex:{

required:"请选择性别"

age:{

required:"请输入年龄",

range:jQuery.validator.format("年龄介于 {0} 和 {1} 之间")

}

//errorElement: "em", //可以用其他标签，记住把样式也对应修改

success: function(label) {

//label指向上面那个错误提示信息标签em

label.text("ok!") //清空错误提示消息

.addClass("success"); //加上自定义的success类

}

});

$("#tijiao").click(function(){

if(validate.valid()){

//alert("123");

//validate.submit();

var username=$("#username").val();

var userpwd=$("#userpwd").val();

var sex=$(":input[name='sex'][checked]").val();

var age=$("#age").val();

if($.trim(username)==""||$.trim(userpwd)==""||$.trim(sex)==""||$.trim(age)==""){

alert("请填写完整表单");

$(":input[id=username]").focus(); ?

return false;

}

//alert($.trim(username));

$.ajax({

? type: "POST",

? url: "register",

? data: "username="+username+"&userpwd="+userpwd+"&sex="+sex+"&age="+age,

? success:function(data){

? //alert(data);

? if(data.toString()=="true"){

? alert("注册成功!");

? window.location.href="userenter.jsp";

? }else{

? alert("注册失败,点击返回!");

? window.location.href="my_userlogin.jsp";

? }

});

}else{

alert("请填写完整");

}

});

$("#reset").click(function(){

//alert("567");

$(":input").val("");

validate.resetForm();

});

})

3.register的Servlet的主要代码

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

String username=request.getParameter("username").trim();

String userpwd=request.getParameter("userpwd").trim();

String sex=request.getParameter("sex").trim();

String age=request.getParameter("age").trim();

//System.out.println(username);

UserDao Userdao=UserDao.getInstance();

//Date d=new Date();

Calendar c=Calendar.getInstance();

//System.out.println(c);

User u=new User();

u.setUserName(username);

u.setUserPwd(userpwd);

u.setUserSex(sex);

u.setUserAge(Integer.valueOf(age));

u.setUserLoginTime(c);

boolean res=Userdao.saveUser(u);

out.print(res);

4.UserDao的代码

private static UserDao instance=null;

public static UserDao getInstance() {

// TODO Auto-generated method stub

if(instance==null){

instance=new UserDao();

}

return instance;

}

/**

* 根据用户注册输入的用户名

* 判断该用户是否存在

* @param name

* @return 存在返回true,不存在返回false

public boolean getUserByName(String name){

boolean result=false;

Configuration cg=new Configuration().configure();

SessionFactory sf=cg.buildSessionFactory();

Session session=sf.openSession();

String hql="from User u where u.userName=:username";

Query q=session.createQuery(hql);

q.setString("username", name);

List list=q.list();

if(list!=null&&list.size()>0){

result=true;

}

session.close();

return result;

}

/**

* 保存用户注册信息

* @param user

* @return

public boolean saveUser(User user){

boolean result=false;

Configuration cg=new Configuration().configure();

SessionFactory sf=cg.buildSessionFactory();

Session session=sf.openSession();

session.beginTransaction();

session.save(user);

session.getTransaction().commit();

result=true;

return result;

}