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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM