Jquery验证码刷新+表单验证+请求服务器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<!--<form action="{:U('Exam/UserLogin')}" method="post">-->
    <table border="1">
        <tr>
            <td>账号</td>
            <td><input type="text" name="username" id="username"><i id="user"></i></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd" id="pwd"><i id="pw"></i></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td>
                <input type="text" name="code" size="10px" id="code">
                <span id="im"><img src="{:U('Exam/Yzm')}" width="120px" height="50px;" id="ym"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="登录" id="sub"></td>
        </tr>
    </table>
<!--</form>-->

<script src="__PUBLIC__/jq/jquery.js"></script>
<script>
    $(document).on('click','span',function(){
        //图片的点击事件
        $("#im").empty();
        $("#im").append("<img src='{:U("Exam/Yzm")}' width='120px' height='50px;' id='ym'>");
    });



    $("#sub").click(function(){
        //取值
        var username = $("#username").val();
        var pwd = $("#pwd").val();
        var code = $("#code").val();
        //判断
        if(username.length==0){
            $("#user").append("<font color='red'>账号不能为空</font>");
        }

        if(pwd.length==0){
            $("#pw").append("<font color='red'>密码不能为空</font>");
        }

        if(pwd.length>6){
            $("#pw").append("<font color='red'>密码长度不能超过6位数</font>");
        }

        //请求
        $.post("{:U('Exam/UserLogin')}",
                {
                    username: username,
                    pwd: pwd,
                    code: code
                },
                function(data){
                    if(data == 1){
                        alert('登录成功');
                        location.href="{:U('Index/show')}";
                    }else{
                        alert('登录失败');
                        history.go(0);
                    }
                });
    });
</script>
</body>
</html>
posted @ 2018-05-24 12:04 车车大人阅读(1207) 评论(0) 收藏举报
刷新页面返回顶部