表单验证模块（获得焦点、失去焦点等验证）
2024-04-22 08:20:42
需求文档：
字典类型表单验证。（以下描述你们将在“详细设计文档”中看到。）
1.编码不能为空（前端验证）
2.编码只能由数字和字母组成（前端验证）
3.编码在数据库表当中是主键，要求具有唯一性（后台验证：ajax）
4.失去焦点则验证
5.验证消息显示在控件的下方
6.消息要求红色字体，12号。
7.获得焦点之后，自动清除错误信息，并且文本框中的内容不合法的时候，文本框的内容自动清空。
8.用户最终保存按钮点击之后，必须保证所有的表单项都是合法的方可提交。
前端代码：
<%@page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8"><link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">// alert(new Date().getTime());$(function(){// 页面加载完毕之后，给id="code"的文本框绑定blur事件// $("#code").blur(); // 这行代码是“触发”blur事件。$("#code").blur(function(){// 绑定blur事件，blur事件发生之后执行这个回调函数。// this // this是dom对象，不是jquery对象，注意：dom和jquery对象的方法不能交叉使用，各自使用各自的。// jquery对象转换成dom对象：jquery对象.get(0) 或者 jquery对象[0]// dom对象转换成jquery对象：$(dom对象)var code = $.trim(this.value); // $.trim() 这是jquery中的工具方法，可以去除字符串的前后空白。// 没必要这么写// if(code.length == 0){}// 这样写。if(code == ""){//注意：jQuery中的html(),text()和val() //相关链接 https://www.cnblogs.com/WhiteM/p/7470105.html$("#codeErrorMsg").text("编码不能为空！");} else {// 不为空，继续判断该编码是否含有特殊符号。// 正则表达式：只能由数字和字母组成/*常见正则表达式：[0-9] 0到9任意1个数字[a-z] a到z任意一个字母[A-Z] A到Z任意一个字母[0-9]{1} 0到9任意1个数字[0-9]{2} 0到9任意2个数字[0-9]{2,} 0到92+个数字(次数 >= 2)[0-9]{2,3} 0到9数字出现个数为2到3次。[0-9]+ 出现1到N次[0-9]* 出现0到N次[0-9]? 出现1或0次^ 字符串开始$ 字符串结尾javascript当中怎么创建正则表达式对象？两种方式：第一种方式：使用js内置的对象var regExp = new RegExp("正则表达式");第二种方式：使用//var regExp = /正则表达式/;建议使用第二种方式，代码写的少。正则表达式对象的test方法很重要，该方法的返回值为true或者false，true表示字符串和正则表达式能够匹配成功。*/var regExp = /^[0-9a-zA-Z]+$/;var ok = regExp.test(code);if(ok){// 不为空，并且没有特殊符号，应该继续判断唯一性（需要发送ajax验证）// 验证唯一性（根据code取数据）$.ajax({type : "get",url : "settings/dictionary/type/checkCodeUnique.do",async : false, // 同步ajax.cache : false,data : {"code" : code},success : function(json){// {"success" : true} 表示可以使用// {"success" : false} 表示不能使用if(json.success){$("#codeErrorMsg").text("");}else{$("#codeErrorMsg").text("编码已存在！");}}});}else{$("#codeErrorMsg").text("编码只能由数字和字母组成！");}}});$("#code").focus(function(){if($("#codeErrorMsg").text() != ""){// 清空内容$(this).val(""); }// 清空错误信息$("#codeErrorMsg").text("");});$("#saveBtn").click(function(){// 触发blur事件$("#code").blur(); // blur()事件发生之后，这行代码就执行结束了。// 这行代码执行结束了，但是异步的ajax还在后台执行。// 也就是说ajax验证还没有结束。// 非常重要：ajax什么情况下必须使用同步方式。// 查看错误信息有没有if($("#codeErrorMsg").text() == ""){$("#dicTypeForm").submit();}});});</script>
</head>
<body><div style="position: relative; left: 30px;"><h3>新增字典类型</h3><div style="position: relative; top: -40px; left: 70%;"><button type="button" class="btn btn-primary" id="saveBtn">保存</button><button type="button" class="btn btn-default" onclick="window.history.back();">取消</button></div><hr style="position: relative; top: -40px;"></div><form id="dicTypeForm" action="settings/dictionary/type/save.do" method="post" class="form-horizontal" role="form"><div class="form-group"><label for="create-code" class="col-sm-2 control-label">编码<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="code" name="code" style="width: 200%;" placeholder="编码作为主键，不能是中文"><span id="codeErrorMsg" style="color: red;font-size: 12px;"></span></div></div><div class="form-group"><label for="create-name" class="col-sm-2 control-label">名称</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="name" name="name" style="width: 200%;"></div></div><div class="form-group"><label for="create-describe" class="col-sm-2 control-label">描述</label><div class="col-sm-10" style="width: 300px;"><textarea class="form-control" rows="3" id="description" name="description" style="width: 200%;"></textarea></div></div></form><div style="height: 200px;"></div>
</body>
</html> 表单验证补充详细讲解：
需求：
1、表单验证：保存字典值的表单验证。字典类型编码不能为空字典值不能为空在同一个字典类型编码下，字典值具有唯一性。排序号可以为空，但是排序号不为空的时候，必须是正整数。注意：最终用户点击保存的时候，必须保证每一个表单项是合法的方可提交。还要注意：ajax同步2、保存字典值。```cpp
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<meta charset="UTF-8"><link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><script type="text/javascript">$(function(){$("#value").blur(function(){// 判断“字典类型编码”是否为空var typeCode = $("#typeCode").val();if(typeCode == ""){$("#typeCodeErrorMsg").text("字典类型编码不能为空！");} else {// 字典类型编码不为空，判断字典值是否为空。var value = $.trim(this.value);if(value == ""){$("#valueErrorMsg").text("字典值不能为空！"); }else{// 字典类型编码不为空，并且字典值也不为空，继续判断唯一性。$.ajax({type : "get",cache : false,async : false,url : "settings/dictionary/value/checkValueUniqueByTypeCode.do",data : {"typeCode" : typeCode,"value" : value}, success : function(json){if(json.success){$("#valueErrorMsg").text(""); }else{$("#valueErrorMsg").text("字典值在该字典类型编码下已存在！"); }}});}}});$("#typeCode").change(function(){var typeCode = this.value;if(typeCode == ""){$("#typeCodeErrorMsg").text("字典类型编码不能为空！");} else {$("#typeCodeErrorMsg").text(""); }});$("#value").focus(function(){if($("#valueErrorMsg").text() != ""){$(this).val("");}$("#valueErrorMsg").text(""); });$("#orderNo").blur(function(){var orderNo = $.trim(this.value);if(orderNo != ""){// 排序号可以为空，但是不为空的时候必须是正整数var regExp = /^[1-9][0-9]*$/;var ok = regExp.test(orderNo);if(ok){$("#orderNoErrorMsg").text(""); }else{$("#orderNoErrorMsg").text("排序号必须为正整数！");}}});$("#orderNo").focus(function(){if($("#orderNoErrorMsg").text() != ""){$(this).val("");}$("#orderNoErrorMsg").text(""); });$("#saveBtn").click(function(){// 触发blur$("#value").blur();$("#orderNo").blur();if($("#typeCodeErrorMsg").text() == "" && $("#valueErrorMsg").text() == "" && $("#orderNoErrorMsg").text() == ""){$("#dicValueForm").submit();}});});</script>
</head>
<body><div style="position: relative; left: 30px;"><h3>新增字典值</h3><div style="position: relative; top: -40px; left: 70%;"><button type="button" class="btn btn-primary" id="saveBtn">保存</button><button type="button" class="btn btn-default" onclick="window.history.back();">取消</button></div><hr style="position: relative; top: -40px;"></div><form id="dicValueForm" action="settings/dictionary/value/save.do" method="post" class="form-horizontal" role="form"><div class="form-group"><label for="create-dicTypeCode" class="col-sm-2 control-label">字典类型编码<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><select class="form-control" id="typeCode" name="typeCode" style="width: 200%;"><option value=""></option><c:forEach items="${dtList }" var="dt"><option value="${dt.code }">${dt.name }</option></c:forEach></select><span id="typeCodeErrorMsg" style="color: red;font-size: 12px;"></span></div></div><div class="form-group"><label for="create-dicValue" class="col-sm-2 control-label">字典值<span style="font-size: 15px; color: red;">*</span></label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="value" name="value" style="width: 200%;"><span id="valueErrorMsg" style="color: red;font-size: 12px;"></span></div> </div><div class="form-group"><label for="create-text" class="col-sm-2 control-label">文本</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="text" name="text" style="width: 200%;"></div></div><div class="form-group"><label for="create-orderNo" class="col-sm-2 control-label">排序号</label><div class="col-sm-10" style="width: 300px;"><input type="text" class="form-control" id="orderNo" name="orderNo" style="width: 200%;"><span id="orderNoErrorMsg" style="color: red;font-size: 12px;"></span></div></div></form><div style="height: 200px;"></div>
</body>
</html>
表单验证模块（获得焦点、失去焦点等验证）相关推荐
- 鼠标事件、表单事件、键盘事件、焦点事件
事件介绍 当我们点击一个按钮的时候,会弹出一个对话框.在JavaScript中, "点击"这个事情就看作一个事件."弹出对话框"其实就是我们在点击事件中做的一些 ...
- JavaScript表单事件 获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件 焦点处理 焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
- AngularJS----服务，表单，模块
AngularJS中的服务 服务是一个函数或对象,AngularJS中可以创建自己的服务或使用内建服务.$http是AngularJS中最常见的服务,服务向服务器发送请求,应用响应服务器传送过来的数据 ...
- form表单的多种提交方式及提交前验证
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1.无任何验证提交(最普通的提交) ...
- web 表单自定义字段_带有自定义服务器字段验证的AJAX表单提交
web 表单自定义字段 Overview 总览 This article presents a method for validating form data in a PHP script usin ...
- 【HTML5网页期末作业】基于HTML+CSS+JS实现宠物网站，表单展示登录页面，带JS密码验证
- html5表单密码验证及提示,HTML5表单及其验证(示例代码)
1.输入型控件 Input type 用途 说明 email 电子邮件地址文本框 url 网页URL文本框 number 数值的输入域 属性 值 描述 max number 规定允许的最大值 min ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- html5密码确认属性,HTML5表单及其验证【html自带属性验证】
HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架, ...
- spry提示信息设置html,[原]Spry框架：表单验证构件
Spry框架的构件除了可以提供层叠样式面板等提高用户体验的可视化工具外,还提供了一组用于验证表单数据的Spry构件,不用编写代码,就可以高效快捷地完成表单验证的任务.这些验证框架有:验证文本框.验证文 ...
最新文章
- css：z-index
- apkplug利用plugin.xml传递自定义属性
- 训练生成对抗网络的一些需要关注的问题
- 非京籍上学有多难？从这些数据看真相
- [USACO1.2]双重回文数 Dual Palindromes
- Scala具体解释---------Scala是什么？可伸展的语言！
- eclipse启动tomcat 访问http://localhost:8080 报404错误
- 收藏版: 深度介绍分布式系统原理
- 计算机毕业设计的步骤
- V神站台--黑马BZZ究竟如何？和FIL 有什么区别？
- [译]关于Android图形系统一些事实真相
- 【热血足球联盟】补丁记录
- VANT3无法使用slot引用外部icont
- JAVA中设置drwxr_x___权限_linux命令中chmod 777 以及drwxr-xr-x分别代表什么意思
- 高斯多种备份/迁移方式
- 微信域名防封问题解决源码
- Inno Setup软件 打包多个安装包程序
- 03版计算机,office2003完整版电脑版
- 【零基础】从零开始学神经网络《python神经网络编程》——手写数字识别实战
- 虚拟人，数字人，虚拟数字人的定义区别