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

待我称王封你为后i 2022-06-08 05:36 205阅读 0赞

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

--------------------

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

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

#### 实现文本框中出现内容 ####

![实现文本框中出现内容][SouthEast]  
可以在文本框input里边加上 placeholder=”请输入用户名”属性，密码什么的框里需要的话，理同。

#### 首先添加jar包 JQuery插件 ####

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

先起一个id  
![这里写图片描述][SouthEast 3]

![这里写图片描述][SouthEast 4]

重点：这是本JQuery框架验证的语法  
![这里写图片描述][SouthEast 5]

![这里写图片描述][SouthEast 6]

![这里写图片描述][SouthEast 7]

![这里写图片描述][SouthEast 8]

![这里写图片描述][SouthEast 9]

密码：  
![这里写图片描述][SouthEast 10]  
确认密码：  
![这里写图片描述][SouthEast 11]  
![这里写图片描述][SouthEast 12]  
![这里写图片描述][SouthEast 13]

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

首先是

### 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> </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">  <input type="radio"
                                        name="gender" value="男" checked="checked" /> 男
                                               <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%;"> </td> <td colspan="2" style="width:50%"><img src="${pageContext.request.contextPath}/imageCode" width="180" height="30" class="textinput" style="height:30px;" id="img" />   <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的代码 ###

### 这是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

[SouthEast]: /images/20220608/f81721c2d2f0496cb631d99481c7abff.png
[SouthEast 1]: /images/20220608/53cb995bc49c4e8095b5fe3d7caabdb8.png
[SouthEast 2]: /images/20220608/2b894ceec4bb44d8a0cea3c3566e6a89.png
[SouthEast 3]: /images/20220608/9cc42dbc28cf4e40a3f77f8dc6371767.png
[SouthEast 4]: /images/20220608/087206b4258145c78765c122e46f73b4.png
[SouthEast 5]: /images/20220608/fe8af221aaeb431b8556c532c968ac70.png
[SouthEast 6]: /images/20220608/90eef863ab0c46408e2c171b3d4be89a.png
[SouthEast 7]: /images/20220608/c4791fe3407148d5a45dd1061520b8e9.png
[SouthEast 8]: /images/20220608/11fa9ded41ba48ebb3c030b71806af63.png
[SouthEast 9]: /images/20220608/489e5c73de924b5eadd87dd168e78d5b.png
[SouthEast 10]: /images/20220608/efcf0be408b8429ca99c0c30297f8be5.png
[SouthEast 11]: /images/20220608/f676125bf7ac4ef4bb0e0b90aa915509.png
[SouthEast 12]: /images/20220608/d65af987419e406481eb354e163c343c.png
[SouthEast 13]: /images/20220608/6d5254d0a9b349249d805159675afdde.png