EasyUI在表单提交时如何校验数据是否发生变化
2018-01-02 14:10
1551 查看
Easyui在form表单提交时应该先校验页面数据是否发生改变,之后在提交数据,我提供的方法可以校验Input输入框与combox下拉框的值是否发生变化,另本次使用的input全部是easyui-textbox,使用的下拉框全部为easyui-combobox;
1.首先添加一个from表单,然后填充内容,要求填充内容时对应的控件需要name属性且与后台返回的json数据中参数一致
<form id="fm" method="post" novalidate style="margin: 0; padding: 20px 50px">
2.定义一个变量,用来存放后台的数据,然后与页面数据比较
var rowData;
3.在页面从后台获取数据后,给什么的变量赋值;
rowData = row;
4.写change函数
首先是input的监听函数,由于easyui框架使用easyui-textBox时会自动隐藏用户的input并生成新的input,所以在获取发生改变的input框的name属性时,需要使用$(this).next("input").attr("name");方法,在比较改变后的input的值与后台获取的值后,使用$("#fm").data("changed",true);方法赋值
$(function() {
$("#fm :input").change(function(e){
var valueName = $(this).next("input").attr("name");
var dataValue = rowData[valueName];
var inputValue = e.currentTarget.value;
if(dataValue == inputValue){
$("#fm").data("changed",false);
}else {
$("#fm").data("changed",true);
}
});
}
然后是combox 的监听函数,由于监听函数是监听from表单里所有combox。所以需要找到触发函数的是哪一个对象,并获取对象name属性后,比较改变后的combox的值与后台获取的值,然后给change赋值
$("#fm .easyui-combobox").combobox({
onChange : function(e){
var valueName = $(this)[0].attributes.comboname.value;
var selectValue = rowData[valueName];
if(e == selectValue){
$("#fm").data("changed",false);
}else {
$("#fm").data("changed",true);
}
}
})
5.提交的时候根据change去判断页面数据是否发生改变
if($("#fm").data("changed")){
$.messager.alert('温馨提示', '发生数据参数变化');
}else{
$.messager.alert('温馨提示', '没有发生数据参数变化');
}
1.首先添加一个from表单,然后填充内容,要求填充内容时对应的控件需要name属性且与后台返回的json数据中参数一致
<form id="fm" method="post" novalidate style="margin: 0; padding: 20px 50px">
2.定义一个变量,用来存放后台的数据,然后与页面数据比较
var rowData;
3.在页面从后台获取数据后,给什么的变量赋值;
rowData = row;
4.写change函数
首先是input的监听函数,由于easyui框架使用easyui-textBox时会自动隐藏用户的input并生成新的input,所以在获取发生改变的input框的name属性时,需要使用$(this).next("input").attr("name");方法,在比较改变后的input的值与后台获取的值后,使用$("#fm").data("changed",true);方法赋值
$(function() {
$("#fm :input").change(function(e){
var valueName = $(this).next("input").attr("name");
var dataValue = rowData[valueName];
var inputValue = e.currentTarget.value;
if(dataValue == inputValue){
$("#fm").data("changed",false);
}else {
$("#fm").data("changed",true);
}
});
}
然后是combox 的监听函数,由于监听函数是监听from表单里所有combox。所以需要找到触发函数的是哪一个对象,并获取对象name属性后,比较改变后的combox的值与后台获取的值,然后给change赋值
$("#fm .easyui-combobox").combobox({
onChange : function(e){
var valueName = $(this)[0].attributes.comboname.value;
var selectValue = rowData[valueName];
if(e == selectValue){
$("#fm").data("changed",false);
}else {
$("#fm").data("changed",true);
}
}
})
5.提交的时候根据change去判断页面数据是否发生改变
if($("#fm").data("changed")){
$.messager.alert('温馨提示', '发生数据参数变化');
}else{
$.messager.alert('温馨提示', '没有发生数据参数变化');
}
相关文章推荐
- 【Easyui】解决未对form表单数据进行校验直接就可以提交的问题
- easyui提交表单数据的时候如何防止二次提交
- 关于easyui-combobox在表单提交的时候如何做非空校验(笔记)
- 检查form表单数据是否发生变化
- easyui form表单提交自定义验证数据是否已存在
- Js校验表单数据后提交表单的3种方法
- Java中,当表单含有文件上传时,提交数据的如何读取
- html+javascript如何在表单数据提交之前进行友好提示
- Java中,当表单含有文件上传时,提交数据的如何读取
- 如何用chrome查看提交的post表单数据
- Struts如何从客户提交表单中提取数据,和传统的HTML form相比有什么优势?
- Spring MVC中Controller如何获取Form表单提交的数据
- Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证
- Jquery判断form表单数据是否变化
- 大表格,多Form元素的提交 判断表单数据是否有被修改过
- Action如何接收jsp页面form表单提交的数据?
- 校验页面表单是否可以提交
- jquery validate如何不提交表单就做验证(ajax提交数据)
- form表单通过GET提交的数据自动生成的链接地址如何伪静态化处理
- JavaWeb -- Struts1 使用示例: 表单校验 防表单重复提交 表单数据封装到实体