JQuery教程：登录页面校验-马育民老师

JQuery教程：登录页面校验

作者：马育民 • 2021-06-11 09:01 • 阅读：10073

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

function doLogin(){
        
        var phone=$("#phone").val();
        var password=$("#password").val();
        if (phone==""){
            $("#phone").focus();
            $("#phone_msg").html("请输入手机号！")
            return
        }else{
            $("#phone_msg").html("")
        }
        if (password==""){
            $("#password").focus();
            $("#password_msg").html("请输入密码！")
            return
        }else{
            $("#password_msg").html("")
        }
        $("#msg").html("用户名或密码错误，请重新登录！")
    }
    
    </script>
</head>
<body>
    <form method="post" >
            手机号：<input type="text" id="phone"  /><div id="phone_msg" style="color: red"></div>
            密码：<input type="password" id="password" /><div id="password_msg" style="color: red"></div>
            <input name="submit1" type="button" class="inputBtn login" value="登录" onclick="doLogin()"/>
            <div id="msg" style="color: red"></div>
        </ul>
    </form>
</body>
</html>
```

原文出处：http://malaoshi.top/show_1IX1I223gmoy.html

吉ICP备15003043号