form 表单用法

最新推荐文章于 2024-05-04 15:43:14 发布

ZLNEWcsdn

最新推荐文章于 2024-05-04 15:43:14 发布

阅读量735

点赞数 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>

ZLNEWcsdn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form 表单用法

form表单如果动态验证的话其实现的原理是使用的是Key,Value值的方式传值的，name=key,value=value如果不设置name的话，找不到value值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登...
复制链接

扫一扫