java基础回顾之前端表单验证

最新推荐文章于 2023-03-06 10:22:06 发布

武侠㿝卄清

最新推荐文章于 2023-03-06 10:22:06 发布

阅读量119

点赞数

分类专栏： web开发 java

本文链接：https://blog.csdn.net/qq_30347133/article/details/108819844

版权

web开发同时被 2 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

常见正则表达式：
					[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次
					
					^	字符串开始
					$	字符串结尾

<%@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 == ""){
				$("#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>

武侠㿝卄清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java基础回顾之前端表单验证

常见正则表达式： [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
复制链接

扫一扫