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

使用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