使用JQuery和Ajax实现基本表单校验

---

本文实现的是使用JQuery和Ajax实现基本表单校验，包括前端校验以及用MVC模式判断用户名是否存在等功能

代码在下边 ，如果觉得页面分析很乱的话，可以直接看后边的代码

实现文本框中出现内容

可以在文本框input里边加上 placeholder=”请输入用户名”属性，密码什么的框里需要的话，理同。

首先添加jar包 JQuery插件

先起一个id

重点：这是本JQuery框架验证的语法

密码：

确认密码：

其他的东西其实是类似的，好啦现在就是验证用户名是否存在啦！用户名是否存在，理同邮箱是否已被注册等。

首先是

form里边的内容

<form id="myform" action="${pageContext.request.contextPath}/register"            method="post">            <table width="850px" border="0" cellspacing="0">                <tr>                    <td style="padding:30px">                        <h1>新会员注册${user_msg }</h1>                        <table width="70%" border="0" cellspacing="2" class="upline">                            <tr>                                <td style="text-align:right">会员名：</td>                                <td>                                    <input type="text" class="textinput" name="username" placeholder="请设置您的用户名"/>                                </td>                                <td><font color="#999999"></font></td>                            </tr>                            <tr>                                <td style="text-align:right">密码：</td>                                <td><input type="password" class="textinput"                                    name="password" id="password" placeholder="请设置密码"/></td>                                <td><font color="#999999"></font></td>                            </tr>                            <tr>                                <td style="text-align:right">重复密码：</td>                                <td><input type="password" class="textinput"                                     name="repassword"  /></td>                                <td>&nbsp;</td>                            </tr>                            <tr>                                <td style="text-align:right; width:20%">会员邮箱：</td>                                <td style="width:40%">                                <input type="text" class="textinput"                                    name="email" placeholder="请输入有效的邮箱地址"/></td>                                <td><font color="#999999"></font></td>                            </tr>                            <tr>                                <td style="text-align:right">性别：</td>                                <td colspan="2">&nbsp;&nbsp;<input type="radio"                                    name="gender" value="男" checked="checked" /> 男                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio"                                    name="gender" value="女" /> 女</td>                            </tr>                            <tr>                                <td style="text-align:right">联系电话：</td>                                <td colspan="2"><input type="text" class="textinput"                                    style="width:350px" name="telephone"/></td>                            </tr>                            <tr>                                <td style="text-align:right">个人介绍：</td>                                <td colspan="2"><textarea class="textarea" name="introduce" placeholder="让大家更好的认识你..."></textarea>                                </td>                            </tr>                        </table>                        <h1>注册校验</h1>                        <table width="80%" border="0" cellspacing="2" class="upline">                            <tr>                                <td style="text-align:right; width:20%">输入校验码：</td>                                <td style="width:50%"><input type="text" class="textinput" name="ckCode" />                                </td>                                <td>${ckcode_msg }</td>                            </tr>                            <tr>                                <td style="text-align:right;width:20%;">&nbsp;</td>                                <td colspan="2" style="width:50%"><img                                    src="${pageContext.request.contextPath}/imageCode" width="180"                                    height="30" class="textinput" style="height:30px;" id="img" />&nbsp;&nbsp;                                    <a href="javascript:void(0);" onclick="changeImage()">看不清换一张</a>                                </td>                            </tr>                        </table>                        <table width="70%" border="0" cellspacing="0">                            <tr>                                <td style="padding-top:20px; text-align:center"><input                                    type="image" src="images/signup.gif" name="submit" border="0">                                </td>                            </tr>                        </table></td>                </tr>            </table>        </form>

然后是js的代码

<script type="text/javascript">//自定义校验规则    $.validator.addMethod(        //规则的名称        "checkUsername",        //校验的函数        function(value,element,params){            //定义一个标志            var flag = false;//默认false            //value:输入的内容            //element:被校验的元素对象            //params：规则对应的参数值            //目的：对输入的username进行ajax校验            $.ajax({                "async":false,//这里必须是false 异步是新开了一个线程 所以先执行谁不知道                  "url":"${pageContext.request.contextPath}/checkUsername",                "data":{"username":value},                "type":"POST",                "dataType":"json",                "success":function(data){                    flag = data.isExist;//当用户名存在的时候  返回true 那么下边！flag就返回false  那么就不通过                    //如果不存在  返回false 下边返回true  代表 通过校验                }            });            //返回false代表该校验器不通过            return !flag;//        }    );//普通表单的验证    $(function(){        $("#myform").validate({            rules:{                "username":{                    "required":true,//按照顺序来验证的   先校验是否为空  再校验用户名是否存在                     "checkUsername":true//按照上下顺序来先后验证                },                "password":{                    "required":true,                    "rangelength":[6,12]                },                "repassword":{                    "required":true,                    "rangelength":[6,12],                    "equalTo":"#password"                },                "email":{                    "required":true,                    "email":true                },                "telephone":{                    "required":true,                    "rangelength":[11,11],                    "digits":true                }            },            messages:{                "username":{                    "required":"用户名不能为空",                    "checkUsername":"用户名已存在"                },                "password":{                    "required":"密码不能为空",                    "rangelength":"密码长度6-12位"                },                "repassword":{                    "required":"密码不能为空",                    "rangelength":"密码长度6-12位",                    "equalTo":"两次密码不一致"                },                "email":{                       "required":"邮箱不能为空",                    "email":"邮箱格式不正确"                },                "telephone":{                    "required":"手机号码不能为空",                    "rangelength":"手机号码长度11位",                    "digits":"手机号码必须由数字组成"                }            }        });    });</script>

这是Servlet：

package com.qf.web.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.qf.service.UserService;import com.qf.service.impl.UserServiceImpl;//验证用户名是否存在public class CheckUsernameServlet extends HttpServlet {    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        //获得用户名        String username = request.getParameter("username");         UserService service = new UserServiceImpl();        boolean isExist;        try {            isExist = service.checkUsername(username);            String json = "{\"isExist\":"+isExist+"}";//注意拼接的时候一定要注意中英文，特别是冒号等。            response.getWriter().write(json);        } catch (Exception e) {            e.printStackTrace();        }    }    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}

这是service层：

import com.qf.domain.User;public interface UserService {    /**     * 验证用户名 是否存在     * @param username     * @return     * @throws Exception     */    public boolean checkUsername(String username)throws Exception;}

这是service.impl实现类：

package com.qf.service.impl;import java.sql.SQLException;import com.qf.dao.UserDao;import com.qf.dao.impl.UserDaoImpl;import com.qf.domain.User;import com.qf.exception.UserException;import com.qf.service.UserService;import com.qf.util.SendJMail;public class UserServiceImpl implements UserService {    UserDao ud=new UserDaoImpl();    @Override    public boolean checkUsername(String username) throws Exception {        Long isExist = 0L;        try {            isExist = ud.checkUsername(username);        } catch (SQLException e) {            e.printStackTrace();        }        return isExist>0?true:false;//大于0存在  否则 不存在    }}

这是dao层：

package com.qf.dao;import com.qf.domain.User;public interface UserDao {    /**     * 异步验证用户名是否存在     * @param username     * @return     * @throws Exception     */    public Long checkUsername(String username) throws Exception;}

这是dao.impl实现类：

package com.qf.dao.impl;import org.apache.commons.dbutils.QueryRunner;import org.apache.commons.dbutils.handlers.BeanHandler;import org.apache.commons.dbutils.handlers.ScalarHandler;import com.qf.dao.UserDao;import com.qf.domain.User;import com.qf.util.C3P0Util;public class UserDaoImpl implements UserDao {    @Override    public Long checkUsername(String username) throws Exception {        QueryRunner qr=new QueryRunner(C3P0Util.getDataSource());        return  (Long) qr.query("select count(*) from user where username=?",new ScalarHandler(),username );        //转型    } }

实体类里用户名：username
密码：password