基于maven+ssm的增删改查之前端校验数据合法性
时间:2022-07-23
本文章向大家介绍基于maven+ssm的增删改查之前端校验数据合法性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
接上一节。
直接在add.js中修改即可。如果index.jsp没有相应的id属性,直接加上匹配add.js中的即可。
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位中文");
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("邮箱格式不正确");
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
return true;
}
$("#emp_save").click(function(){
//alert($("#empAddModal form").serialize());
if(!validate_add_form()){
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);
}
});
});
新加的如标红所示。
启动服务器查看效果:
用户名输入正确之后,邮箱输入不正确:
用户名的输入框成功的变回了绿色,都输入正确之后,点击保存:
- 开发人员为何需要企业服务总线?
- 搭建Visual Studio Code+Python开发环境1.对象简介2. 搭建步骤3.小结
- 洛谷P3835 【模板】可持久化平衡树
- 17.HTML
- 洛谷P2925 [USACO08DEC]干草出售Hay For Sale
- Numpy 修炼之道 (13)—— 将python函数向量化
- 洛谷P1887 乘积最大3
- 18.CSS
- R语言可视化——ggplot图表系统中的形状
- [机器学习Lesson 1 Introduction] 机器学习的动机与应用
- 洛谷P3377 【模板】左偏树(可并堆)
- Numpy 修炼之道 (12)—— genfromtxt函数
- 19.JavaScript
- 20.DOM
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 纯CSS实现照片墙效果
- Tungsten Fabric知识库丨构建、安装与公有云部署
- 7. Pandas系列 - 排序和字符串处理
- JVM调优,程序员必须掌握的知识
- 5分钟Flink - 侧输出流(SideOutput)
- 数据库技术:MySQL 基础和 SQL 入门,单表、约束和事务
- ConcurrentHashMap的size方法是线程安全的吗?
- 数据科学家极力推荐核心计算工具-Numpy的前世今生(上)
- 数据库技术:MySQL 多表,外键约束,数据库设计,索引,视图,存储过程触发器,数据控制,数据备份与恢复
- WordPress 站点地址被恶意篡改的防护方案讨论
- 握草,你竟然在代码里下毒!
- MySQL 练习题和答案,以及运行结果截图
- 给你一个优秀的Django工程模板
- 纯css实现选项卡功能
- linux每日一练文件专题之常用文件命令(附昨日答案)