登录界面 表单验证

html部分：

<div class="login_form_box">
            <form method="post" action="">
                <div class="field username_field">
                    <label class="username_icon"><img src="../images/login_name.png"/></label>
                    <input name="username" type="text" placeholder="请输入员工编号"/>
                </div>
                <div class="field password_field">
                    <label class="password_icon"><img src="../images/login_pwd.png"/></label>
                    <input name="password" type="password" placeholder="请输入密码"/>
                </div>
                <div class="rember_pwd">
                    <input  type="checkbox" value=""/><span>下次记住我</span>
                    <a href="##">忘记密码？</a>
                </div>
                <div class="login_bt">
                    <a href="##">登录</a>
                </div>
            </form>
        </div>

js部分：

//校验用户名不为空和长度
$("input[name='username']").blur(function () {
    var value = $(this).val();
    if (value == "" || value == null || value == undefined) {
        $(".Error_prompt>span").text("请输入员工编号");
        $(".Error_prompt").fadeIn("fast", "linear");
        return;
    } else {
        var len = $(this).val().length;
        if (len < 6) {
            $(".Error_prompt>span").text("员工编号不能小于6位");
            $(".Error_prompt").fadeIn("fast", "linear");
            return;
        } else {
            $(".Error_prompt").fadeOut("fast", "linear");
        }

    }
});
//校验密码不为空和长度
$("input[name='password']").blur(function () {
    var value = $(this).val();
    if (value == "" || value == null || value == undefined) {
        $(".Error_prompt>span").text("请输入密码");
        $(".Error_prompt").fadeIn("fast", "linear");
        return;
    } else {
        var len = $(this).val().length;
        if (len < 6) {
            $(".Error_prompt>span").text("密码不能低于6位");
            $(".Error_prompt").fadeIn("fast", "linear");
            return;
        } else {
            $(".Error_prompt").fadeOut("fast", "linear");
        }
    }
});

//后台用户名密码校验 方法一：
var user = $("input[name='username']").val();
var pwd = $("input[name='password']").val();
$(".login_bt").click(function () {
    $.post("data.json", {username: user, password: pwd}, function (data) {
        var result = data.result;
        //用户名和密码校验错误
        if (result == "0") {
            $(".Error_prompt>span").text("该用户不存在或密码错误");
            $(".Error_prompt").fadeIn("fast", "linear");
        }
    });
});

//后台用户名密码校验 方法二：
var user = $("input[name='username']").val();
var pwd = $("input[name='password']").val();
$(".login_bt").click(function () {
    $.ajax({
        type: "post",
        url: "data.json",//这里的data.json 是我模拟的一个json文件名。url放的是当前页面请求的后台地址。
        data: {username: user, password: pwd},//发送给后台的数据
        success: function (Msg) {//Msg后台返回的json数据
            var result = data.result;
            //用户名和密码校验错误
            if (result == "0") {
                $(".Error_prompt>span").text("该用户不存在或密码错误");
                $(".Error_prompt").fadeIn("fast", "linear");
            }
        }
    });
});