记账本前端实现-优快云博客

本文链接：https://blog.youkuaiyun.com/m_mt35/article/details/78247037

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>验证</title>
<style>
*{
margin: 0 auto;
background-color: #c0d8ef;
}

input{
background: #e5efbf;
border: 1px #cccccc solid;
border-radius: 2px;
margin-left: 15px;
}

button{
margin-top: 5px;
background: #c9ccc9;
border: 1px #cccccc solid;
border-radius: 2px;
}
</style>
<script src="jquery.1.12.4.js"></script>
</head>
<body>
<div style="margin-left: 615px">记账本</div>
<div style="width: 300px;height: 300px;border: 1px green solid;" id="div"></div>

<div style="width: 300px;">输入框<input type="text" id="writediv" size="30px"/></div>
<button style="width: 50px;display: block" id="write">记录</button>

<br><br>
<div style="width: 300px;">搜索框<input type="text" id="searchdiv" size="30px"/></div>
<button style="width: 50px;display: block" id="search">搜索</button>
<script>
$("#write").click(function(){

//获取当前记事本中的内容
var b = $("#div").html();
//获取当前输入框中的内容
var a = $("#writediv").val();

//判断是否存在敏感字符
//敏感字符如下所示:
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]");
var result = a.match(pattern);

//若存在敏感字符则提示
if (result)
{
alert("含有特殊字符")
}
//判断文字是否为空
else if(a=="")
{
alert("您输入的文字为空!")
}
//判断记录的内容是否存在
else if(b.indexOf(a)>=0){
alert("您记录的内容已存在");
}
else
{
console.log(b.length);
//判断记事本中内容的长度判断是否内容为空，起始长度为0
//当内容不为空时，则在li的第一个子元素前面加上内容
if(b.length>=1)
{
$("li:first-child").before("<li style='list-style: none'>"+a+"</li>");
}
//当内容为空时，则追加内容
else
{
//将文字追加到div中
$("#div").append("<li style='list-style: none'>"+a+"</li>");
}

}

})

$("#search").click(function(){

//获取当前记事本中的内容
var b = $("#div").html();
//获取当前搜索框中的内容
var a = $("#searchdiv").val();

//判断是否存在敏感字符
//敏感字符如下所示:
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]");
var result = a.match(pattern);

//若存在敏感字符则提示
if (result)
{
alert("含有特殊字符")
}
//当搜索的文字为空时
else if(a==""){
alert("您输入的文字为空!");
}
//若存在相关内容
else if(b.indexOf(a)>=0){
alert("搜到相关内容");
}
else
{
alert("未搜到相关内容");
}
})

</script>
</body>
</html>