Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/python_LC_nohtyp/article/details/102752697

Interface login to submit those pit data

Submit to realize data

Simple data transfer input element should be the submission box form by form, but prior to the submission of data to be input in the judgment to determine whether the air

Analyzing the user input information is empty, if not empty Submit

This is quite simple, as long as the input element binding section through js, which determine the value of val is empty you can, and then set the return ×× () on the onsubmit form form elements, setting a function if is empty returns false, If you can not empty return ture

Submit an error message

This can be said that the whole essence, here I make a simple login screen, use the framework to write jq

html content frame

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 导入jq框架 -->
    <script src="js/jquery.min.js"></script>
    <!-- 导入页面逻辑代码,必学先导入jq框架-->
    <script src="js/blog.js"></script>
</head>
<body>
    <form action="" onsubmit="return checkvalue();">
        <!-- 新建一个外围最大的div元素 -->
        <div id="log">
            <!-- 将所有的元素和数据添加到div中 -->
            <div class="title">
                <h3>Login!</h3>
            </div>
            <div class="tip">
                Login:
            </div>
            <div class="item">
                <input type="text"
                    name="username"
                    id="username"
                    placeholder="UserName">
            </div>
            <div class="error" id="err1">用户名不能为空！</div>
            <div class="item">
                <input type="text"
                    name="password"
                    id="password"
                    placeholder="PassWord">
            </div>
            <div class="error" id="err2">密码不能为空</div>
            <div class="btn">
                <input type="submit" value="Login">
            </div>
        </div>
    </form>
</body>
</html>

Nothing to say here, is very simple login system chant

css code

Here I set a css code, is beginning to be hidden from the error message.

#log>.error{
    color: red;
    display: none;   
}

js code

A key point here is to get input box, and submit event information are bound together, otherwise the code only when you load the page you get

// 获取元素对象并保存在变量中
var $form=$("form");
var $btn=$(".btn>input");
// 定义一个验证函数
function checkvalue(){
    // 获取元素对象并保存在变量中
    var $username=$("#username");
    var $password=$("#password");
    var $err1=$("#err1");
    var $err2=$("#err2");
    // 将错误显示都实在为不显示
    $err1.hide();
    $err2.hide();
    // 当用户名和密码都不为空时
    if($username.val()!=""&&$password.val()){
        // 直接提交
        return true;
    }else{
        // 如果用户名为空
        if($(username).val()==""){
            // 提示用户名称不为空的错误显示
            $err1.show(250);
            // 阻止提交
            return false;
        }else{
            // 如果密码为空，提示密码的错误显示
            $err2.show(250);
            // 阻止提交
            return false;
        }
    }
}

html login page to submit those pit data