小说项目Tips(表单验证，选项卡)

前端通过后端传过来的’\n’ ,'<br/>'等字符串换行失败解决方案

1. 在要填写内容的外部加上<pre></pre> （加上这个标签就会有效果，但pre本上内部的文字不会自动换行，所以需要再给pre这个标签添加css）

2. white-space: pre-wrap;
   word-wrap: break-word;
   

表单验证的不同需求

注：绑定的是oninput事件，实时去除。

只能输入数字

 // 清除"数字"以外的字符 
    this.codeInput_getPassword.value = this.codeInput_getPassword.value.replace(/[^\d]/g, "");

去除表单中所有的空格

 //去除验证码中的所有空格
    this.codeInput_getPassword.value = this.codeInput_getPassword.value.replace(/\s+/g, "")

去除所有的中文字符

  // 清除中文字符 
  this.emailInput_getPassword.value = this.emailInput_getPassword.value.replace(/[\u4e00-\u9fa5]/ig, "");

输入位数的限制（只能输入四位）

   var str_code = codeInput_getPassword.value;
    while (str_code.length >4) {    
        str_code = str_code.substring(0, 4)
        this.codeInput_getPassword.value = str_code
    }

选项卡

之前做增删改查的项目的时候，菜单目录就需要用到选项卡。当时按照最笨的方法，代码量大，重复多。写出来就下是下面的样子，一个一个取消，显得很弱智。此时用选项卡循环遍历取消，对应点击触发事件就好的多了。

最初的代码：

function change_one() {
     one_flower.style.backgroundColor = "#edced7"
     one_flower.style.color = "rgb(255, 0, 119)"
     one_flower.style.border = " 1px solid rgb(255, 0, 119)"
     five_flower.style.backgroundColor = "rgb(225, 207, 211)"
     five_flower.style.color = "#89676b"
     five_flower.style.border = "none"
     twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
     twenty_flower.style.color = "#89676b"
     twenty_flower.style.border = "none"
     fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
     fifty_flower.style.color = "#89676b"
     fifty_flower.style.border = "none"
     my_flower.style.backgroundColor = "rgb(225, 207, 211)"
     my_flower.style.color = "#89676b"
     my_flower.style.border = "none"

}
function change_five() {
    five_flower.style.backgroundColor = "#edced7"
    five_flower.style.color = "rgb(255, 0, 119)"
    five_flower.style.border = " 1px solid rgb(255, 0, 119)"
    one_flower.style.backgroundColor = "rgb(225, 207, 211)"
    one_flower.style.color = "#89676b"
    one_flower.style.border = "none"
    twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
    twenty_flower.style.color = "#89676b"
    twenty_flower.style.border = "none"
    fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
    fifty_flower.style.color = "#89676b"
    fifty_flower.style.border = "none"
    my_flower.style.backgroundColor = "rgb(225, 207, 211)"
    my_flower.style.color = "#89676b"
    my_flower.style.border = "none"

}
function change_twenty() {
    twenty_flower.style.backgroundColor = "#edced7"
    twenty_flower.style.color = "rgb(255, 0, 119)"
    twenty_flower.style.border = " 1px solid rgb(255, 0, 119)"
    one_flower.style.backgroundColor = "rgb(225, 207, 211)"
    one_flower.style.color = "#89676b"
    one_flower.style.border = "none"
    five_flower.style.backgroundColor = "rgb(225, 207, 211)"
    five_flower.style.color = "#89676b"
    five_flower.style.border = "none"
    fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
    fifty_flower.style.color = "#89676b"
    fifty_flower.style.border = "none"
    my_flower.style.backgroundColor = "rgb(225, 207, 211)"
    my_flower.style.color = "#89676b"
    my_flower.style.border = "none"
}
function change_fifty() {
    fifty_flower.style.backgroundColor = "#edced7"
    fifty_flower.style.color = "rgb(255, 0, 119)"
    fifty_flower.style.border = " 1px solid rgb(255, 0, 119)"
    one_flower.style.backgroundColor = "rgb(225, 207, 211)"
    one_flower.style.color = "#89676b"
    one_flower.style.border = "none"
    five_flower.style.backgroundColor = "rgb(225, 207, 211)"
    five_flower.style.color = "#89676b"
    five_flower.style.border = "none"
    twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
    twenty_flower.style.color = "#89676b"
    twenty_flower.style.border = "none"
    my_flower.style.backgroundColor = "rgb(225, 207, 211)"
    my_flower.style.color = "#89676b"
    my_flower.style.border = "none"

}
function change_my() {
   my_flower.style.backgroundColor = "#edced7"
   my_flower.style.color = "rgb(255, 0, 119)"
   my_flower.style.border = " 1px solid rgb(255, 0, 119)"
   one_flower.style.backgroundColor = "rgb(225, 207, 211)"
   one_flower.style.color = "#89676b"
   one_flower.style.border = "none"
   five_flower.style.backgroundColor = "rgb(225, 207, 211)"
   five_flower.style.color = "#89676b"
   five_flower.style.border = "none"
   twenty_flower.style.backgroundColor = "rgb(225, 207, 211)"
   twenty_flower.style.color = "#89676b"
   twenty_flower.style.border = "none"
   fifty_flower.style.backgroundColor = "rgb(225, 207, 211)"
   fifty_flower.style.color = "#89676b"
   fifty_flower.style.border = "none"

}

修改之后：

//循环获取每个flowerSon标签
var flowerSon = document.querySelectorAll(".flowerSon")//加上相同的类名
//循环获取四个点击事件
for (let i = 0; i < flowerSon.length; i++) {
    flowerSon[i].onclick = function () {
        //先循环取消所有显示
        for (let j = 0; j < flowerSon.length; j++) {
            flowerSon[j].style.backgroundColor = "rgb(225, 207, 211)"
            flowerSon[j].style.color = "#89676b"
            flowerSon[j].style.border = "none"
        }
        //每次点击的时候显示
        flowerSon[i].style.backgroundColor = "#edced7"
        flowerSon[i].style.color = "rgb(255, 0, 119)"
        flowerSon[i].style.border = " 1px solid rgb(255, 0, 119)"
    }
}

肉眼可见的，少了很多重复的内容。本质就是循环遍历

事例

这次项目用到选项卡的部分挺多的