1、提交功能
提交之前通常会进行前端验证，来减轻服务器负担，验证成功后提交到服务器，然后在进行数据库操作（验证登录、用户注册等等）。
2、前端验证
前端验证的作用是将用户输入的信息以我们设定的格式（正则表达式）来验证，如果格式不正确则进行提示。以上一章的登录界面为例，进行前端验证。
- script中调用了form.verify({ }）函数，mypwd是自己声明的表单验证关键字，mypwd[ ]里面有两部分，第一部分是正则表达式，就是你想让用户输入的格式，第二部分是提示信息，就是当用户输入的信息和你规定的格式不匹配时，显示的信息（以layui提供的弹窗形式弹出）
- input标签中四个特别的属性
（1）required 表示这个input标签是必填项（所有input默认都有required）。
（2）lay-verify="mypwd|required" 表示这个标签验证的关键字是mypwd和required。
（3）placeholder="请输入学号"表示未输入情况下，text内显示请输入学号。
（4）autocomplete="off" 表示不启用自动完成功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script>
layui.use('form',function(){
var form =layui.form;
form.verify({
//自定义的表单验证关键字
mypwd: [
/^[a-zA-Z\d_]{6,10}$/ //正则表达式
,'只能包括字母数字或下划线，长度为6-10位' //如果未匹配成功，显示的提示信息
] ,
//还有其他自定义的关键字，可以继续写
xuehao:[
]
});
})
</script>
</head>
<body>
<div style="text-align: center;width:400px;margin:0 auto;margin-top: 200px;">
<form class="layui-form" action="/MyServlet1" method="post">
<div class="layui-form-item">
<label class="layui-form-label">学 号</label>
<div class="layui-input-inline">
<!-- -->
<input type="text" name="xuehao" required lay-verify="number" placeholder="请输入学号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="mypwd|required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身 份</label>
<div class="layui-input-inline">
<select name="shenfen" lay-verify="required">
<option value=""></option>
<option value="admin">admin</option>
<option value="admin">user</option>
</select>
</div>
</div>
<div class="layui-input-block"style="margin:auto 0px;">
<button class="layui-btn" lay-submit lay-filter="formDemo"style="margin-right:10px ;">提交</button>
<button type="reset" class="layui-btn layui-btn-primary"style="margin-right:25px ;">重置</button>
</div>
</form>
</div>
</body>
</html>
测试结果：
未输入状态.png
学号栏输入字母.png
密码格式不符.png
3、提交表单
经过上一步的验证，保证了每一项都是非空的，并且学号和密码也按照了我们的格式输入，现在就可以提交了，有两个地方需要注意
<form class="layui-form" action="/MyServlet1" method="post">
(1)action="url": /MyServlet1代表提交到什么位置，这里用的是servlet方式，所以提交到了一个名字叫的MyServlet1类。
(2)method="post":代表以post方式提交数据（另一种是get）,Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。而Get将数据被放在请求的URL中，容易造成信息泄露，故通常使用Post。<button class="layui-btn" lay-submit lay-filter="formDemo"style="margin-right:10px ;">提交</button>
(1)要实现提交功能的按钮必须要有lay-submit属性，否则不起作用。
4、后端验证
后端验证一般是将表单信息和数据库信息进行对照，如果正确则打开新的页面，如果不正确则提示学号或者密码输入错误，这里就不进行数据库操作了，直接将获得的信息打印出来即可。
- 测试前需要服务器环境，我使用的是tomcat。无需安装，在建立动态网页项目时添加进来即可。（使用Eclipse开发环境）
- 在src中新建一个servlet类，取名MyServlet1（本次是测试，取名比较随意，真正项目中变量、类、文件、id、name等等取名要尽量使人一眼看懂，并有一定规律和联系）
*@WebServlet("/MyServlet1")：注解里面的MyServlet1对应着你前端form标签里的action！（一定要一致，我复制时把/也复制过去了，结果就404了）- 一定要设置字符集不然会乱码，请求和响应都要！
- html各种域传值到servlet中都是用的name，text、password、select等都要设置name。
package com.xu;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet1
*/
@WebServlet("/MyServlet1")
public class MyServlet1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置字符集
response.setCharacterEncoding("gbk");
request.setCharacterEncoding("gbk");
//html各种域传值到servlet中都是用的name，与id无关。getParameter(name)
String sNo = request.getParameter("xuehao"); //获得学号text中输入的值(name="xuehao")
String pwd = request.getParameter("password"); //获得密码text中输入的值(name="password")
String select=request.getParameter("shenfen"); //获得身份下拉框中选中的值(name="shenfen")
response.getWriter().write("学号："+sNo);
response.getWriter().write("密码："+pwd);
response.getWriter().write("身份："+select);
}
}
测试结果
html界面.png
MyServlet1界面.png
Eclipse中目录结构.png
网友评论