加入js代码判断用户名密码

我想在这个页面里面加个js代码判断用户名和密码是否有，是否都输入了，密码是否够6位，应该怎么加代码，谢谢各位！

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/page-account.css">
    <link rel="icon" href="favicon.ico">
    
</head>

<body>
    <div class="login-box">
        <!--head-->
        <div class="py-container logoArea">
            <a href="home.html" class="logo"></a>
        </div>
        <!--loginArea-->
        <div class="loginArea">
            <div class="py-container login">
                <div class="loginform">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li><a href="#index" data-toggle="tab">扫描登录</a></li>
                        <li class="active"><a href="#profile" data-toggle="tab">账户登录</a></li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div id="index" class="tab-pane">
                            <p>啦啦啦</p>
                        </div>
                        <div id="profile" class="tab-pane active">
                            <form class="sui-form">
                                <div class="input-prepend">
                                    <span class="add-on loginname"></span>
                                    <input type="text" class="span2 input-xfat" placeholder="用户名/邮箱">
                                </div>
                                <div class="input-prepend">
                                    <span class="add-on loginpwd"></span>
                                    <input type="password" class="span2 input-xfat" placeholder="请输入密码">
                                </div>
                                <div class="setting">
                                    <label class="checkbox inline"><input name="m1" type="checkbox" checked> 自动登录</label>
                                    <span class="forget">忘记密码？</span>
                                </div>
                                <div class="logined">
                                    <a class="sui-btn btn-block btn-xlarge btn-danger" href="home.html">登&nbsp;&nbsp;录</a>
                                </div>
                            </form>

                            <div class="registration">
                                <ul>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                </ul>

                                <a href="register.html">立即注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--foot-->
        <div class="py-container copyright">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">手机品优购</a></li>
                <li><a href="#">销售联盟</a></li>
                <li><a href="#">品优购社区</a></li>
                <li><a href="#">品优购公益</a></li>
                <li><a href="#">English Site</a></li>
                <li><a href="#">Contact U</a></li>
            </ul>
            <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
            <div class="beian">京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</body>

</html>


<script>
            function onk(){
                var a=0;
                var b=0;
                console.log(a,b)
                var user = document.getElementById("user").value;
                var pwd= document.getElementById("pwd").value;
                if(user.trim() == "" || pwd.trim() == ""){
                    alert("用户和密码不能为空");            
                    a=1;        
                    console.log(a,b)    
                }else if(pwd.length <= 5 ){
                    alert("密码长度是6位哦");    
                    b=1;
                    console.log(a,b)
                }    
                if(a!=1&&b!=1){
                    console.log(a,b)
                    location.replace("index.html"); 
            }
            console.log(a,b)
            }
        </script>

```

img

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7717132
  • 你也可以参考下这篇文章：js中比较两个对象是否相同的方法（详细）
  • 除此之外, 这篇博客: 图片上传、预览、及点击图片弹出浮层查看大图中的 js: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • var formData = new FormData();

    formData.append('file', $('#txt_upLoadPictrue')[0].files[0]);//图片

     formData.append('fileNumber',fileNumber);

    formData.append('editTime',editTime);

    if(flag){
               $.ajax({
                        url:"${pageContext.request.contextPath }/pattern/save",
                        type:"post",
                        dataType:"json",
                        data:formData,
                        processData: false,
                        contentType: false,
                        async:true,
                        success:function(data){$.messager.alert('提示',data.msg,'error');}

  • 以下回答由chatgpt基于相关博客总结生成:

    解决方案：

    根据题意，需要在页面中加入JS代码，判断用户输入的用户名和密码是否已经填入，以及密码是否超过了6个字符的长度要求。下面给出具体的实现步骤：

    1. 在页面中加入相应的HTML元素，包括用户名和密码输入框和一个提交按钮，同时给它们设置对应的id属性，方便JS代码中调用。
    <label>用户名：<input type="text" id="username"></label><br>
<label>密&emsp;码：<input type="password" id="password"></label><br>
<button id="submit">提交</button>
    1. 使用JS代码获取用户名和密码输入框的值，并判断它们是否非空并且密码是否超过6个字符。
    var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username.length === 0 || password.length === 0) {
  alert("请填写用户名和密码！");
} else if (password.length < 6) {
  alert("密码长度不能少于6个字符！");
} else {
  //TODO: 执行提交操作
}
    1. 将上述代码部署到提交按钮的点击事件中即可。完整代码如下：
    <label>用户名：<input type="text" id="username"></label><br>
<label>密&emsp;码：<input type="password" id="password"></label><br>
<button id="submit">提交</button>
<script>
document.getElementById("submit").addEventListener("click", function() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username.length === 0 || password.length === 0) {
    alert("请填写用户名和密码！");
  } else if (password.length < 6) {
    alert("密码长度不能少于6个字符！");
  } else {
    //TODO: 执行提交操作
  }
});
</script>