1.思维导图
2.代码部分
<head> <title>Bootstrap Validator入门案例</title> <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/bootstrapvalidator/css/bootstrapValidator.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrapvalidator/js/bootstrapValidator.min.js"></script> <script> $(function () {//页面加载完成 $("#myForm").bootstrapValidator({ message : "this is not a valid field",//设置提示信息 fields:{//设置要校验的字段集合 username:{ validators:{ notEmpty:{ }, stringLength:{ min:6, max:10 }, regexp:{ regexp: /^[a-z0-9]{6,10}$/ } } }, password:{ validators:{ notEmpty:{ }, stringLength:{ min:6, max:10 }, regexp:{ regexp: /^[a-z0-9]{6,10}$/ } } } } }); }) </script> </head> <body> <form id="myForm" action="${pageContext.request.contextPath}/demo01" method="post"> <div class="form-group"> 账户:<input type="text" name="username"><br> </div> <div class="form-group"> 密码:<input type="text" name="password"><br> </div> <div class="form-group"> <button type="submit">提交</button> </div> </form>
</body>
-
不同错误提示不同的错误信息提示
-
密码不能和账户一样!；使用different属性
-
确认密码和密码必须一致；使用identical属性
-
邮箱要满足邮箱格式；使用emailAddress属性
<head> <title>BootstrapValidator高级使用</title>
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/bootstrapvalidator/css/bootstrapValidator.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrapvalidator/js/bootstrapValidator.min.js"></script> <script> $(function () { $("#myForm").bootstrapValidator({ message: "this is not valiad field", fields: { username: { validators: { notEmpty: { message: "账户不能为空" }, stringLength: { message: "账户长度在6~10之间", min: 6, max: 10 }, regexp: { message: "账户由小写字母、数字组成", regexp: /^[a-z0-9]{6,10}$/ } } }, password: { validators: { notEmpty: { message: "密码不能为空" }, stringLength: { message: "密码长度在6~10之间", min: 6, max: 10 }, regexp: { message: "密码由小写字母、数字组成", regexp: /^[a-z0-9]{6,10}$/ }, different: { message: "账户和密码不能一致", field: "username" } } }, repassword: { validators: { notEmpty: { message: "确认密码不能为空" }, stringLength: { message: "确认密码长度在6~10之间", min: 6, max: 10 }, regexp: { message: "确认密码由小写字母、数字组成", regexp: /^[a-z0-9]{6,10}$/ }, identical: { message: "两次密码不一致", field: "password" } } }, email: { validators: { notEmpty: { message: "邮箱不能为空" }, emailAddress: { message: "邮箱格式不对" } } } } }); }) </script> </head> <body> <form id="myForm" action="${pageContext.request.contextPath}/demo01" method="post"> <div class="form-group"> 账户:<input type="text" name="username"/><br> </div> <div class="form-group"> 密码:<input type="text" name="password"/><br> </div> <div class="form-group"> 确认密码:<input type="text" name="repassword"/><br> </div> <div class="form-group"> 邮箱:<input type="text" name="email"/><br> </div> <div class="form-group"> <button type="submit">提交</button> </div> </form> </body>
<head> <title>Echarts入门案例</title> <script src="echarts/echarts.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { <%--3,初始化echarts容器--%> var myChart = echarts.init(document.getElementById('main')); <%--4,设定echarts的属性--%> myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["耳机","鼠标","键盘","笔记本","台式机","U盘"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) }) </script> </head> <body> //2,设定一个具备宽高的echarts容器 <div id="main" style="width: 600px;height: 400px"> </div> </body>
<head> <title>Echarts折线图</title> <script src="echarts/echarts.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { var eCharts = echarts.init(document.getElementById("main")); var option = { xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] }, yAxis: { type: 'value' }, series: [{ data: [1000, 932, 901, 934, 1290, 1330, 2000], type: 'line' }] }; eCharts.setOption(option); }) </script> </head> <body> <div id="main" style="width: 600px;height: 400px"></div> </body>
<head> <title>Echarts饼状图</title> <script src="echarts/echarts.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { var eCharts = echarts.init(document.getElementById("main")); var option = option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '平面广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '平面广告'}, {value: 135, name: '视频广告'}, {value: 548, name: '搜索引擎'} ] } ] }; eCharts.setOption(option); }) </script> </head> <body> <div id="main" style="width: 600px;height: 400px"></div> </body>
<head> <title>Echarts</title> <script src="echarts/echarts.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { var eCharts = echarts.init(document.getElementById("main")); $.get("${pageContext.request.contextPath}/demo01",{},function (data) { console.log(data); var option = { xAxis: { type: 'category', data: data.list1 }, yAxis: { type: 'value' }, series: [{ data: data.list2, type: 'line', smooth: true }] }; eCharts.setOption(option); },"json"); }) </script> </head> <body> <div id="main" style="width: 600px;height: 400px"></div> </body>
@WebServlet(name = "ExerciseServlet",urlPatterns = "/Exercise") public class Demo01Servlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("ExerciseServlet"); SaleService saleService = new SaleServiceImpl(); try { List<Sale> saleList = saleService.selectSalesList(); List<String> weekList = new ArrayList<>(); List<Integer> salesList = new ArrayList<>(); for (Sale sale : saleList) { weekList.add(sale.getWeekName()); salesList.add(sale.getSales()); } Map<String,Object> map = new HashMap<>(); map.put("list1",weekList); map.put("list2",salesList); JsonUtils.writeJsonStr(response,map); } catch (Exception e) { e.printStackTrace(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } }