表单验证(添加数据)
Demo: 实现表单数据验证
1.导入相关的插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="/MvcPro/"> <!--表示样式可以根据设备的大小自适应--> <meta name="viewport" content="width=divce-width,initial-scale=1"> <!--导入jq的js文件--> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 导入表单验证的开发包 --> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <!-- 导入表单验证的js组件 --> <!--导入bootstrap的js--> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <!--导入bootstrap的css文件--> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <!-- 导入表单验证 --> <script src="pages/verification.js"></script> </head>
2.定义增加雇员信息的表单
<body> <div class="container"> <div class="row"> <div id="div1" class="col-md-8"> <form class="form-horizontal" method="post" id="myform"> <fieldset> <legend>添加雇员信息</legend> <div class="form-group" id="enameDiv"> <!-- 定义表单提示文字 --> <label class="col-md-3 control-label" for="ename">用户名：</label> <div class="col-md-3"> <!-- 定义表单输入组件 --> <input type="text" id="ename" name="ename" class="form-control" value="smith"> </div> <!-- 定义表单错误提示显示元素 --> <div class="col-md-4" id="enameMsg"></div> </div> <div class="form-group" id="jobDiv"> <!-- 定义表单提示文字 --> <label class="col-md-3 control-label" for="job">职 位：</label> <div class="col-md-3"> <!-- 定义表单输入组件 --> <input type="text" id="job" name="job" class="form-control" value="president"> </div> <!-- 定义表单错误提示显示元素 --> <div class="col-md-4" id="jobMsg"></div> </div> <div class="form-group" id="salDiv"> <!-- 定义表单提示文字 --> <label class="col-md-3 control-label" for="sal">薪 薪：</label> <div class="col-md-3"> <!-- 定义表单输入组件 --> <input type="text" id="sal" name="sal" class="form-control" value="30000"> </div> <!-- 定义表单错误提示显示元素 --> <div class="col-md-4" id="salMsg"></div> </div> <div class="form-group" id="hiredateDiv"> <!-- 定义表单提示文字 --> <label class="col-md-3 control-label" for="hiredate">入职日期：</label> <div class="col-md-3"> <!-- 定义表单输入组件 --> <input type="text" id="hiredate" name="hiredate" class="form-control" value="2019-10-10"> </div> <!-- 定义表单错误提示显示元素 --> <div class="col-md-4" id="hiredateMsg"></div> </div> <div class="form-group" id="deptnoDiv"> <!-- 定义表单提示文字 --> <label class="col-md-3 control-label" for="deptno">部门编号：</label> <div class="col-md-3"> <!-- 定义表单输入组件 --> <input type="text" id="deptno" name="deptno" class="form-control" value="20"> </div> <!-- 定义表单错误提示显示元素 --> <div class="col-md-4" id="deptnoMsg"></div> </div> <div class="form-group"> <div class="col-md-3 col-md-offset-3"> <button type="submit" id="submitBtn" class="btn btn-primary">增加</button> <button type="reset" class="btn btn-warning">重置</button> </div> </div> </fieldset> </form> </div> </div> </div> </body> </html>
3.定义 js 编写验证规则
$(function() { $("#myform").validate({//表单验证 /** <label class="col-md-3 control-label" for="ename">用户名：</label> <div class="col-md-3"> <input type="text" id="en.ame" name="ename" class="form-control" placeholder="请输入雇员姓名"> </div> <div class="col-md-4" id="enameMsg"></div> </div> */ //当所有的数据都验证通过之后就自动提交表单 //控制错误信息的输出 // $(element)：表示出现错误的输入框对象 //$(element).attr("id").replace(".", "\."):取得输入框的id值（如果有“.”存在则转换为转义字符表示） //<div class="form-group" id="nameDiv"> //error:错误提示信息 errorPlacement : function(error, element) { $("#" + $(element).attr("id").replace(".", "\.") + "Msg").append(error); }, //高亮显示为红色（ .has-error） //如果输入的数据满足条件则自动执行highlight, //element:表示出错的input输入框 highlight : function(element, errorClass) { $(element).fadeOut(2000,function() {//表示元素在2秒之内消失 $(element).fadeIn(2000, function() {//表示元素再出现 $("#" + $(element).attr("id").replace(".","\.") + "Div").attr("class","form-group has-error"); }); }) }, //数据正确的时候的显示样式（.has-success） unhighlight : function(element, errorClass) { $(element).fadeOut(1,function() { $(element).fadeIn(1,function() { $("#" + $(element).attr("id").replace(".","\.") + "Div").attr("class","form-group has-success"); }); }) }, errorClass : "text-danger", //控制提示信息的颜色 //自定义错误信息 messages:{ ename:"用户名为5~10个字符", job:"职位不能为空", sal:"薪资不能为空", hiredate:"日期不能为空", deptno:"部门编号不能合法", }, //定义验证规则 rules:{ ename:{ required:true, //不能为空字符串 rangelength:[5,10]//长度必须是在5~10之间 }, job:{ required:true }, sal:{ required:true, }, hiredate:{ required:true //不能为空 }, deptno:{ required:true, digits:true } }, /* 校验完毕触发的事件 */ submitHandler : function() {//提交表单的函数 //1.序列化表单获取页面的所有表单元素的数据 var formData = $("#myform").serialize(); console.log(formData); //2.使用ajaxpost提交,向后台提交数据 $.post("emp/addEmp",formData,function(data){ if(data=="1"){ alert("添加成功"); }else{ alert("添加失败"); } }); } }); })
4.验证通过提交表单
在控制层增加添加雇员的方法
//添加数据: 验证表单添加数据 public void addEmp(HttpServletRequest req, HttpServletResponse resp) throws Exception { //将基本信息保存到数据库中 Emp emp = super.initObj(req, Emp.class); if (empservice.addEmp(emp)) { super.print(resp, 1); } else { super.print(resp, 0); } }