基于maven+ssm的增删改查之ajax校验用户名是否可用
时间:2022-07-23
本文章向大家介绍基于maven+ssm的增删改查之ajax校验用户名是否可用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一节利用js校验数据的合法性,这一节结合ajax请求验证用户名是否可用,即是否已经存在。
首先我们要根据输入的empName查询数据库是否存在该用户:
EmployeeController.java
//检查用户名是否可用
@ResponseBody
@RequestMapping("/checkuser")
public Msg checkUser(String empName) {
boolean b = employeeService.checkUser(empName);
if(b) {
return Msg.success();
}
return Msg.fail();
}
EmployeeService.java
public boolean checkUser(String empName);
EmployeeServiceImpl.java
@Override
public boolean checkUser(String empName) {
// TODO Auto-generated method stub
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
long count = employeeMapper.countByExample(example);
return count == 0;
}
add.js
//点击新增弹出模态框
$("#emp_add_modal_btn").click(function(){
//发送ajax请求,查出部门信息显示下拉列表
reset_form("#empAddModal form");
getDepts("#empAddModal select");
$("#empAddModal").modal({
backdrop:"static"
});
});
//清空表单样式和内容
function reset_form(ele){
$(ele)[0].reset();
$(ele).find('*').removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
//查询所有部门信息
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"/curd_ssm/depts",
type:"GET",
success:function(result){
//console.log(result);
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo(ele);
});
}
});
}
function show_validate_msg(ele,status,msg){
//为了清空之前的错误信息,免得即使输入正确了,输入框还是红色的
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
//进行比对
if("success"== status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
function validate_add_form(){
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[u2E80-u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("用户名必须是6-16位英文或2-5位中文");
//$("#empName_add_input").empty();
show_validate_msg("#empName_add_input","error","用户名必须是6-16位英文或2-5位中文");
return false;
}else{
show_validate_msg("#empName_add_input","success","");
}
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式不正确");
//$("#email_add_input").empty();
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
return true;
}
$("#empName_add_input").change(function(){
//$("#empName_add_input").empty();
var empName = this.value;
$.ajax({
url:"/curd_ssm/checkuser",
data:"empName=" + empName,
type:"POST",
success:function(result){
if(result.code == 100){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_save").attr("ajx-va","success");
}else{
show_validate_msg("#empName_add_input","error","用户名不可用");
$("#emp_save").attr("ajx-va","error");
}
}
});
});
$("#emp_save").click(function(){
//alert($("#empAddModal form").serialize());
if(!validate_add_form()){
return false;
}
if($(this).attr("ajx-va")=="error"){
return false;
}
$.ajax({
url:"/curd_ssm/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//关闭模态框,转到最后一页
$("#empName_add_input").empty();
$("#email_add_input").empty();
$("#empAddModal").modal('hide');
to_page(totalRecord);
//alert(result.msg);
}
});
});
红色标注是我们新增的,橙色部分需要我们注意的地方,
因为这种情况下如果不进行禁止保存按钮的使用,此时依然是可以保存的,添加"ajx-va"==error,在之后提交的时候进行判断,就可以避免这种情况的发生。改成正确用户名之后:
点击保存:
- Linux数据流重定向
- C++中消息自动派发之四 使用IDL构建Chat Server
- Linux Shell(二)——Shell的环境配置
- 支持插件的消息中间件【msg broker with plugin】
- Linux Shell(一)——Shell变量
- 智能指针shared_ptr【无锁设计基于GCC】
- 浅谈代码覆盖
- Base PyQt4, Simple Web APP Framwork
- Linux用户身份切换
- TCPDUMP 抓包
- Embeding Python & Extending Python with FFPython
- kNN最邻近规则分类
- 通用排行榜组件
- Future Pattern
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 简单谈谈Linux内核定时器
- Ubuntu cron日志开启与查看的实现步骤
- 详解Apache配置多个监听端口和不同的网站目录
- CentOS7服务器中apache、php7以及mysql5.7的安装配置代码
- Ubuntu中静态DNS配置的方法详解
- shiro缓存机实例代码
- Linux deepin 删除多余内核的实现方法
- linux烧写、配置、搭建Edison环境
- 详解使用 split 命令分割 Linux 文件
- 在博客后台为内容模块实现增删改查功能
- 解决Debian系统自动更新软件包的问题的方法
- PHP 基于 Cookie + Session 实现用户认证功能
- 创建并运行一个新的 Laravel 项目
- linux nslookup命令使用详解
- Go 数据存储篇(五):建立数据库连接并进行增删改查操作