表单验证（使用AJAX）

最新推荐文章于 2022-12-05 00:51:31 发布

无声情话

最新推荐文章于 2022-12-05 00:51:31 发布

阅读量9k

点赞数 6

文章标签： ajax 表单验证

本文链接：https://blog.csdn.net/qinghuawusheng/article/details/78663354

版权

AJAX 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

表单验证

2 篇文章 0 订阅

订阅专栏

1，编写页面
2，查询数据库名字，
3，配置文件
4，页面判断

效果展示：

在不输入信息或者错误信息时光标移开直接提示
重置将所有提示清楚

这里写图片描述

1，编写页面

<body>
    <form action="add" onSubmit="return login(this);">
    <h2 align="center">请注册</h2>
    <table align="center">
                <tr>
                <td>用户名：</td>
                <td><input type="text" name="name" id="mess" onblur="checkName()"></td>
                <td>    <span id="message"></span></td>
            </tr>
            <tr>
                <td>密 &nbsp;码：</td>
                <td><input type="password" name="pwd" id="ipwd" onblur="sspwd()"></td>
                <td> <span id="spwd"></span></td>
            </tr>
                        <tr>
                <td>确认密码：</td>
                <td><input type="password" name="pwd2" id="pwd2" onblur="checkPwd()"></td>
                <td> <span  id="spwd2"></span></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置" onclick="clean()"></td>
                <td> <input type="submit" value="注册"  ></td>
            </tr>

            </table>
    </form>


</body>

2，查询数据库名字，
判断数据库是否有这个用户有则不能使用

package org.xian.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.xian.dao.TreeDao;
import org.xian.dao.UserDao;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class ApiAction extends ActionSupport {

    private String name;
    private UserDao dao;
    private Map map;

    public void setDao(UserDao dao) {
        this.dao = dao;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
    public Map getMap() {
        return map;
    }

    public void setMap(Map map) {
        this.map = map;
    }
    public String checkName() {

        map=new HashMap();
        map.put("status", "ok");
        List list=dao.checkName(name);
        if (list.size()!=0) {
            map.put("message","用户已存在，请重新输入~~~" );
            map.put("code", "1");
        }else {
            map.put("message","用户名可以使用~~~" );
            map.put("code", "0");
        }

        return SUCCESS;
    }


}

3，配置文件
applicationContext.xml

    <!-- -action- -->
<bean class="org.xian.action.ApiAction" id="apiAction">
        <property name="dao" ref="userDao"></property>
</property>
    </bean>
    <!-- dao -->
    <bean class="org.xian.dao.UserDao" id="userDao">
        <property name="hibernateTemplate" ref="hibernateTemplate"></property>
    </bean>

struts.xml

<package name="json" namespace="/api" extends="json-default">
        <action name="checkName" class="apiAction" method="checkName">
            <result name="success" type="json">
                <param name="root">map</param>
            </result>
        </action>
    </package>

4，页面判断
判断名字是否可用

    function checkName() {

        var name = $("#mess").val();
        if (name == "") {
            $("#message").removeClass();
            $("#message").addClass("message");
            $("#message").html("用户不能为空！");
            return false;
        }
        $.ajax({
            type : "POST",
            url : "api/checkName",
            data : "name=" + name,
            success : function(msg) {
                if (msg.code == 1) {

                    $("#message").removeClass();
                    $("#message").addClass("message");
                    $("#message").html(msg.message);

                } else {
                    $("#message").removeClass();
                    $("#message").addClass("message2");
                    $("#message").html(msg.message);
                }
            }
        });
    }

判断密码不能为空，两次密码需要一样

    function checkPwd() {
        var pwd2 = $("#pwd2").val();
        var pwd = $("#ipwd").val();
        if (pwd2 == "") {
            $("#spwd2").removeClass();
            $("#spwd2").addClass("message");
            $("#spwd2").html("密码不能为空！");
            return false;
        }

        if (pwd == pwd2) {

            $("#spwd2").removeClass();
            $("#spwd2").addClass("message2");
            $("#spwd2").html("可以使用~~~");

        } else {
            $("#spwd2").removeClass();
            $("#spwd2").addClass("message");
            $("#spwd2").html("两次输入密码不一样~~~");
        }

    }

    function sspwd() {
        var pwd = $("#ipwd").val();
        if (pwd == "") {
            $("#spwd").removeClass();
            $("#spwd").addClass("message");
            $("#spwd").html("密码不能为空！");
            return false;
        } else {
            $("#spwd").removeClass();
            $("#spwd").addClass("message2");
            $("#spwd").html("可以");
        }

    }

提交时提醒

function login(){
    if(form.name.value == ""||form.name.value==null){
        alert("用户不能为空！");
        return false;
    }
    if(form.pwd.value == ""||form.pwd.value==null){
        alert("密码不能为空！");
        return false;
    }
    if(form.pwd2.value == ""||form.pwd2.value==null){
        alert("请再次输入密码！");
        return false;
    }
}

重置时清楚所有提示信息

function clean() {
    $("#message").removeClass();
    $("#spwd").removeClass();
    $("#spwd").html("");
    $("#spwd2").removeClass();
    $("#spwd2").html("");
    $("#message").html("");

}

无声情话

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
表单验证（使用AJAX）

1，编写页面 2，查询数据库名字， 3，配置文件 4，页面判断效果展示：在不输入信息或者错误信息时光标移开直接提示重置将所有提示清楚1，编写页面 <body> <form action="add" onSubmit="return login(this);"> <h2 align="center">请注册</h2> <table align="center">
复制链接

扫一扫

专栏目录