H-ui验证码的倒计时及异步发送验证用户名

按钮

<input type="text" class="input-text" value="李四" ajaxurl="http://localhost/shop-sso/sso/validataUsername" id="user-name" name="username" datatype="*2-16" nullmsg="用户名不能为空">
<input type="button" id="sendCodeBut" class="btn btn-primary radius" value="发送验证码">

定义方法

$(function(){

        $("#form-admin-add").Validform({
            tiptype:2,
            callback:function(form){
                sendRequestCallback(form,"http://localhost/shop-sso/sso/register",function () {
                    location.href="http://localhost/shop-sso/toLogin"
                })
                return false;
            }
        });

        $("#sendCodeBut").click(function () {
            //禁用按钮
            $("#sendCodeBut").prop("disabled",true);

            //倒计时
            timeFun();

            //发送邮件
            var email=$("#email").val();
            $.get("http://localhost/shop-sso/sso/sendValidaCode?email="+email,null,function () {

            });

        });
    });


    var time=30;

    function timeFun() {
        var sendCodeButEle=$("#sendCodeBut");

        if (time <= 0) {
            sendCodeButEle.prop("disabled",false);
            sendCodeButEle.val("点击这里重新发送");
            time=30;
            return;
        }
        sendCodeButEle.val("验证码已经发送到您的邮箱,("+time+")秒后可重新发送");

        setTimeout(function () {
            time--;
            timeFun();
        },1000);

    }

js代码

function sendRequestCallback(form,url,callback) {

    //1获取表单数据并封装成对象
    var param=formToObject(form);

    //2发送请求
    $.ajax({
        url:url,
        type:"POST",
        data:param,
        dataType:"JSON",
        success:function (data) {
            if (data.status == "success"){
                layer.msg(data.msg, {icon: 1,time:2000},function(){
                    callback();
                });
            }else {
                layer.msg(data.msg, {icon: 2,time:2000});
            }
        },
        error:function (data) {

        }
    });

}

java代码
这里使用RestController

    @RequestMapping("/validataUsername")
    public Map<String,Object> validataUsername(String param){

        Map<String,Object> map=new HashMap<>();

        if ("admin".equals(param)){
            map.put("info","用户名已经存在");
            map.put("status","n");
        }else {
            map.put("info","用户名可以注册");
            map.put("status","y");
        }
        return map;
    }