form 表单用法

最新推荐文章于 2023-12-13 08:15:00 发布

ZLNEWcsdn

最新推荐文章于 2023-12-13 08:15:00 发布

阅读量758

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/ZLNEWCSDN/article/details/89947469

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

form表单如果动态验证的话其实现的原理是使用的是Key,Value值的方式传值的，name=key,value=value如果不设置name的话，找不到value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <script src="libs/jquery.min.js"></script>
</head>
<body>
<div>
    <form  action="start.html" method="get" onsubmit="return check()">
    账号：<input type="text" name="name" required="required"><font color="red">*</font><br><br>
    密码：<input type="password" name="password" required="required"><font color="red">*</font><br><br>
    <input type="submit" value="登录">
    </form>
</div>
</body>
</html>
<script>
    function check() {
        var name = $("input[name='name']").val();
        var password = $("input[name='password']").val();
        if (name==''){
            console.log("用户不能为空")
            return false;
        }
        if (password=="") {
            console.log("密码不能为空")
            return false;
        }
        var data = {"name":name,"password":password}
        $.ajax({
            type:"post",
            url:"loginController/login",
            data:data,
            dataType:"json",
            success:function (r) {
                if (r.code==0){
                    alert("登录成功！");
                    window.location.href="start.html"
                } else {
                    alert(r.msg);
                }
            }
        })
//如果不设置  from表单会进一步操作
        return false;
    }
</script>