JS正则与Echart插件
一、正则
1、 定义
1）、显式定义： 一眼就看明白
--
var 变量名 = new RegExp("正则表达式模式");
2）、隐式定义: 常用，简单。没那么明显，大家可能一眼没有看出
注意:开头和结尾都必须是斜杠"/",且不需要使用双引号括起来的
--
var 变量名 = /正则表达式模式/;
例子:
var myregex = new RegExp("[0-9]");
var myregex = /[0-9]/;
<script type="text/javascript">
//显示定义
var reg = new RegExp("[0-9]");//匹配方括号内的数字，等价于\d
reg = new RegExp("\\d");//显示定义，在使用一些特殊字符时，需要转义
//隐式定义
var reg2 = /\d{6}/;//匹配 6 个数字
//拿到字符源
var a = "123456a123456";
//进行匹配： test()返回 true/false， exec()返回字符串数组
alert(reg.test(a))
alert(reg2.test(a));
console.log(reg2.exec(a));
</script>
2、 方法
1）、 test
（1）作用:是否匹配正则表达式模式。
返回： true/false， true：匹配， false：不匹配
2）、 match
（1） 作用：可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
3）、exec()
返回字符串数组
3、 修饰符
1）、修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
2）、用法
（1） new RegExp("regexp","修饰符")
（2） /regexp/修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正则基本用法</title>
</head>
<body>
<script type="text/javascript">
/*显式定义*/
// [0-9]:表示匹配数字
var reg = new RegExp("[0-9]");
/*隐式定义*/
// \d:表示匹配数字
var reg2 = /\d/;
var reg3 = /[0-9]/;
var reg = /[a-zA-Z0-9]/;
// test()：判断是否满足正则表达式 是返回true，不是返回false
var str = "143wertyui";
console.log(reg.test(str));
console.log(reg2.test(str));
console.log(reg3.test(str));
console.log("===================方法=================");
var reg01 = /a/;
var str2 = "b";
var str3 = "xscbvbbsdragw";
/*test()*/
console.log(reg01.test(str2));
console.log(reg01.test(str3));
/*match()*/
console.log(str2.match(reg01));
console.log(str3.match(reg01));
// 字符串match字符串
console.log(str3.match(str2));
/*exec()*/
console.log(reg01.exec(str2));
console.log(reg01.exec(str3));
console.log("===================修饰符=================");
// i:不区分大小写匹配 g:全局匹配，从第一位开始匹配到最后一位（不加这个修饰符，匹配一个就停止了）
var reg02 = /a/;
var reg03 = /a/i;
var reg04 = new RegExp("a");
var reg05 = new RegExp("a","i");
var reg06 = /a/g;
var reg07 = new RegExp("a","g");
var reg08 = /a/ig;
var reg09 = new RegExp("a","gi");
var str4 = "b";
var str5 = "xscbSKDANDAaavbbsdragw";
var str6 = "ASaDFUGfaDHFJKGADSDAL";
console.log(reg02.test(str6));
console.log(reg03.test(str6));
console.log(reg04.test(str6));
console.log(reg05.test(str6));
console.log("======");
console.log(str5.match(reg02));
console.log(str5.match(reg06));
console.log(str6.match(reg08));
console.log(str6.match(reg09));
</script>
</body>
</html>
4、 表单校验
验证用户名、年龄
要求：
用户名至少需要 8
个字符，必须以字母开头，以字母或数字结尾，可以有-和_。
年龄在 1~99 之间
^:以什么开头
$:以什么结尾
[a-zA-Z]:可以包含字母（不区分大小写）
[0-9]:匹配数字
i:不区分大小写
{n,m}:至少匹配n次，最多匹配m次
*:零次或多次匹配前面的字符或子表达式。例如，zo*
匹配"z"和"zoo"。* 等效于 {0,}。+:一次或多次匹配前面的字符或子表达式。例如，"zo+"与"zo"和"zoo"匹配，但与"z"不匹配。+
等效于 {1,}。?:零次或一次匹配前面的字符或子表达式。
():分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<!--用户名至少需要 8-12个字符，必须以字母开头，以字母或数字结尾，可以有-和_。
年龄在 1~99 之间-->
<body>
<form id="form" action="">
<table>
<tr>
<td>姓名<span id="namespan"></span></td>
</tr>
<tr>
<td>
<input type="text" id="name" name="name" onblur="valName()" />
</td>
</tr>
<tr>
<td>年龄<span id="agespan"></span></td>
</tr>
<tr>
<td>
<input type="text" id="age" name="age" onblur="valAge()" />
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
//表单验证
function valName(){
// ^：匹配输入符的开始位置
// $：匹配输入符的结尾位置
// ()：标记一个子表达式的开始和结束的位置
// +：匹配前面的子表达式一次或者多次
// ?：匹配前面的子表达式零次或一次
// *: 匹配前面的子表达式零次或多次
var pattern =/^[a-z][a-z0-9-_]{6,10}[a-z0-9]$/i;
var str1=document.getElementById("name").value;
if(str1.length>=8){
if(pattern.test(str1)){
//alert("OK");
document.getElementById("namespan").innerHTML="";
return true;
}else{
document.getElementById("namespan").innerHTML="<span style='color:red'>至少需要 8 个字符，必须以字母开头，以字母或数字结尾，可以有-和_</span>";
return false;
}
}
}
function valAge() {
var age = document.getElementById('age').value;
// {n,m}： n 和 m 均为正整数， 其中 n<=m， 最少匹配 n 次且最多匹配 m 次
var reg = /^[1-9][0-9]?$/g;
if(!reg.test(age)){
document.getElementById('agespan').innerHTML='<span style="color:red">年龄要在 1~99 之间</span>';
return false;
}else {
document.getElementById('agespan').innerHTML='';
return true;
}
}
</script>
</html>
二 、ECharts，
一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC
和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 [ZRender]{.underline}，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts
提供了常规的[折线图]{.underline}、[柱状图]{.underline}、[散点图]{.underline}、[饼图]{.underline}、[K线图]{.underline}，用于统计的[盒形图]{.underline}，用于地理数据可视化的[地图]{.underline}、[热力图]{.underline}、[线图]{.underline}，用于关系数据可视化的[关系图]{.underline}、[treemap]{.underline}、[旭日图]{.underline}，多维数据可视化的[平行坐标]{.underline}，还有用于
BI的[漏斗图]{.underline}，[仪表盘]{.underline}，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts还提供了[自定义系列]{.underline}，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
1.柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts报表</title>
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 2、为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
/*3、通过 echarts.init 方法初始化一个 echarts 实例*/
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
/*并通过 setOption 方法生成图*/
// 指定图表的配置项和数据
var option = {
color: ['pink'], // 柱状的颜色
// 提示框组件
tooltip : {
show:true, // 是否显示提示框组件，包括提示框浮层和 axisPointer。默认是true
trigger: 'axis', // 触发类型 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// X坐标轴
xAxis : [
{
type : 'category', // category：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// X轴显示的数据
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// 刻度
axisTick: {
alignWithLabel: true
}
}
],
// Y坐标轴
yAxis : [
{
type : 'value' // 'value' 数值轴，适用于连续数据。
}
],
// 系列列表。每个系列通过 type 决定自己的图表类型
series : [
{
name:'直接访问', // 系列名
type:'bar', // 柱状图
barWidth: '60%', // 柱状宽度
data:[10, 52, 200, 334, 390, 330, 220] // 具体数据
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
</script>
</html>
2.饼状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts报表</title>
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 2、为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/*3、通过 echarts.init 方法初始化一个 echarts 实例*/
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
/*并通过 setOption 方法生成图*/
// 指定图表的配置项和数据
var option = {
// 报表的标题
title : {
text: '某站点用户访问来源', // 正标题
subtext: '纯属虚构', // 副标题
x:'right' // 标题的对齐方式 center、left、right
},
// 组件提示框
tooltip : {
trigger: 'item', // 触发类型,'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
// 提示框字符内容格式器 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
legend: {
// 图例的布局朝向 horizontal：水平方向；vertical：竖直方向
orient: 'vertical',
// 图例组件离容器左侧的距离 如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
left: 'left',
// 图例的数据数组
data: [{
name: '直接访问',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}
,'邮件营销','联盟广告','视频广告','搜索引擎']
},
// 系列列表
series : [
{
name: '访问来源', // 系列名称
type: 'pie', // 图标类型
radius : '55%', // 半径
center: ['50%', '60%'], // 中心点的位置
// 数据
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
// 每个选项的样式
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
</script>
</html>
3. AJax+Echarts
测试data.json中name,和年龄属性，生成相应柱状图，饼状图。
导入data.json
{
"resultCode":1,
"message":"success",
"result":[
{
"userId":1,
"userName":"张三",
"userPwd":"123456",
"userAge":18,
"userSex":true,
"userHead":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3443176063,4021563566&fm=27&gp=0.jpg"
},
{
"userId":2,
"userName":"李四",
"userPwd":"123123",
"userAge":19,
"userSex":false,
"userHead":"http://userimg.yingyonghui.com/head/77/1500654783808/2706577.png-thumb"
},
{
"userId":3,
"userName":"王五",
"userPwd":"123456",
"userAge":20,
"userSex":true,
"userHead":"http://img.mp.itc.cn/upload/20170305/7aefc624437a44f69be70a93c40f8976_th.jpeg"
},
{
"userId":4,
"userName":"赵六",
"userPwd":"123321",
"userAge":21,
"userSex":true,
"userHead":"http://pic34.photophoto.cn/20150130/0005018338514993_b.jpg"
}
]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJax+Echarts</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<button onclick="loadBar()">显示柱状图</button>
<button onclick="loadPie()">显示饼状图</button>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/**
* ajax访问数据，加载柱状图
*/
function loadBar() {
// 发送ajax请求，获取数据
$.ajax({
type:"get",
url:"js/data.json",
success:function(result) {
var nameArr = []; // 数据名
var dataArr = []; // 数据值
// 获取返回的数据中的result名称对应的数组
var resultList = result.result;
// 遍历数组，得到每个对象的用户名和年龄
for (var i = 0; i < resultList.length; i++) {
nameArr.push(resultList[i].userName);
dataArr.push(resultList[i].userAge);
}
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : nameArr,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '30%',
data:dataArr
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
}
});
}
/**
* ajax访问数据，加载饼状图
*/
function loadPie() {
// 发送ajax请求获取数据
$.ajax({
type:"get",
url:"js/data.json",
success:function(result){
var nameArr = [];
var dataArr = [];
// 获取返回的数据中的result名称对应的数组
var resultList = result.result;
// 遍历数组，得到每个对象的用户名和年龄
for (var i = 0; i < resultList.length; i++) {
nameArr.push(resultList[i].userName);
var obj = {};
obj.value = resultList[i].userAge;
obj.name = resultList[i].userName;
dataArr.push(obj);
}
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(document.getElementById("main1"));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: nameArr
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:dataArr,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 将配置项设置到echarts实例中
mycharts.setOption(option);
}
});
}
</script>
</html>
4. Aajx访问接口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aajx访问接口</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
</head>
<body>
</body>
<script type="text/javascript">
/*添加操作*/
/*$.ajax({
type:"get",
url:"http://localhost:8080/xiaowangcai/account",
data:{
actionName:"addAccount",
accountName:"Lisa",
accountType:"招行",
money:10000,
remark:"本月零花钱"
},
success:function(result){
console.log(result);
}
})*/
/*查询操作*/
$.ajax({
type:"get",
url:"http://localhost:8080/xiaowangcai/account",
data:{
actionName:"queryAccountByUserId"
},
success:function(result){
console.log(result);
}
})
</script>
</html>
转载于:https://www.jianshu.com/p/fff7ff3ac74b