SSM框架学习值 jQuery 前端校验

傷城~ 2022-11-05 01:57 184阅读 0赞

我们在添加数据时，或许会输入一些非法字符，或者重复添加的情况，那么这个时候我们就需要使用jquery来实现前端校验  
如员工名合法 邮箱合法等 我们使用正则表达式即可  
[JQuery使用文档][JQuery]  
加入正则表达式验证后，可以发现会对文本长度进行限制  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]  
如此，便完成的校验数据，但我们会发现，这种弹框提示不美观，因此，我们可以使用BootStrap的校验样式进行美化。

我们在原本的input框上改动：

美化后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]  
完成这个后，我们要做的便是使用ajax校验用户名是否重复，并且会对保存按钮设置属性，若用户名合法则让属性为success,而在点击按钮后就可以根据属性进行判断。

$("#userName").change(function(){ 
    		//发送ajax判断是否重复
    		var userName = this.value;
    		$.ajax({ 
    			url:"${APP_PATH}/checkuser",
    			type:"POST",
    			data:"userName="+userName,
    			success:function(result){ 
    				if(result.code==100){ 
    					show_validate_msg("#userName","success","用户名可用");
    					$("#save").attr("ajax-va","success");
    				}else{ 
    					show_validate_msg("#userName","error","用户名不可用");
    					$("#save").attr("ajax-va","error");
    				}
    			}
    		});
    	})
    	$("#save").click(function(){ 
    		//1.模态框中填写表单数据并将其提交给服务器保存
    		var formdata=$("#addmodal form").serialize()//获取表单数据进行序列化，是jquery专门用于ajax请求的
    		//alert(formdata)
    		if(!add_form()){ 
    			return false;
    		}
    		if($(this).attr("ajax-va")=="error"){ 
    			return false;
    		}
    		$.ajax({ 
    			url:"${APP_PATH}/adduser",
    			type:"POST",
    			data:formdata,
    			success:function(result){ 
    				//alert(result.msg);
    				//关闭模态框，跳转到最后一页
    				$('#addmodal').modal("hide");
    				to_page(1);//用总记录数作为总页数，因为数据大，所以会跳转至最后一页，也可以传入一个很大的数,
    				//或者可将数据查询语句按id倒排，然后跳转到首页
    			}
    		});
    	});

如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]  
表单重置，方式数据保存不会重新校验而出错

//点击新增按钮
    	$("#add").click(function(){ 
    		//模态框表单重置
    		$("#addmodal form")[0].reset();//jquery中没有reset，dom中有
    		//在弹出模态框之前需要发送ajax请求，查出部门信息并显示
    		$("#addmodal select").empty();
    		getDepts();
    		
    		$('#addmodal').modal({ 
    			backdrop:"static"
    		})
    	});

[JQuery]: https://jquery.cuishifeng.cn/source.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221023/254d6d755b694a5a817869feb4c88d80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20221023/9d4bc5b3e96e4ada8fef8340bd07d182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20221023/c4461368e184431f8eb9beeeaf9e6f6a.png