实训项目2

layout: post
title: 实训项目2
date: 2020-12-22
author: XiaoJia849
categories:
- 开发部
tags:
- 后端
- js

项目实训已经结束，但是我觉得分享项目可能不太好，所以算了。
以下代码，基本上都是参考网络各位大佬的，但是因为时间有点久了，网上可参考的地方是在是五花八门，所以没有写参考部分。
因为没有系统学习js，但是写前端的时候这些功能又要用，所以以下代码只是能够保证可以使用。
这下面全是前端的东西，感觉放在后端这个Tag很奇怪，(￣▽￣)"

拖动组件
密码输入控制
增加和删除div
模态框的使用
js实现打印

拖动组件

目标功能：鼠标拖动div1下的元素div_ele_1 拖动到div2内，同时向后端发送请求。这里是老师给我们的意见：在管理员更改学生分组时，可以采用拖动包含每个学生信息的一个div，拖动此div道另一个div实现学生分组信息的更改

代码样例

密码输入控制

这个其实在网络上随处可见，我只是记录一下。当初需要完成这个功能的时候，我只是在网上搜了一下，然后就直接使用代码了，，，


function checkPassword(){
   //获取密码输入
   var uPass = document.getElementById("password1").value.trim();
   var span = document.getElementById("span_password");

    var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');

    if (!pwdRegex.test(uPass)) {
        span.innerHTML = "您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！";
        return false;
    }

   //对密码输入进行校验
   if(uPass.length == 0){
       span.innerHTML = "不能为空";
       return false;
   }else if(uPass.length < 6 && uPass.length > 0){
       span.innerHTML = "密码太短";
       return false;
   }
   else if (uPass.length >14){
       span.innerHTML = "密码太长";
       return false;
   }
   else{
       span.innerHTML = "密码可用";
       return true;
   }
}


function checkRePassword(){
   //获取密码输入
   var uPass = document.getElementById("password1").value.trim();
   //获取确认密码输入
   var uRePass = document.getElementById("repsword1").value.trim();
   var span = document.getElementById("span_repassword");
   //对密码输入进行校验
   if(uPass != uRePass){
       span.innerHTML = "两次密码不一致";
       return false;
   }else{
       span.innerHTML = "";
       return true;
   }
}

增加和删除div

           function tijiao() {
                //document.getElementById("from").submit();
                $("#form").submit();
            }

            var info_div = 1;

            function add_div() {
                debugger;
                var e = document.getElementById("details");
                var div = document.createElement("div");
                div.className = "form-group";
                div.id = "details" + info_div;
                div.innerHTML = e.innerHTML;
                var del = document.createElement('div');
                del.innerHTML = '';
                div.children.ddd.appendChild(del);
                document.getElementById("form").appendChild(div);
                info_div++;
            }

            function del_div(eleId) {
                debugger;
                var eeid = document.getElementById(eleId).parentNode.parentNode.parentNode.id;
                var ee = document.getElementById(eeid);
                document.getElementById("form").removeChild(ee);
            }

这里的textarea做了根据输入行数改变自动增加行数的js，我这里直接贴代码吧

模态框的使用

其实很简单，因为bootstrap都已经把一切都做好了，只需要把名字换一下就行了

  
                                
                                解散队伍

js实现打印

    
                   需要打印的内容