自定计算完善校验功能
填报表往往需要在客户端页面输入时进行合法性检查,如检查输入是否为数字或符合规定的格式等。润乾报表通过两种方式实现合法性检查:
第一种,通过设置单元格的填报数据类型自动实现合法性检查,如设置成数值型或Email地址等。
第二种,通过设置单元格校验属性,输入校验表达式,实现手工校验。比如:要求在c5单元格里填写的数据为在0到100之间,则可设单元格校验表达式为:${C5}>=0&& ${C5}<=100。
可是这两种方式都是通过弹出alert框来提示的,如下图,在用户使用过程中好感度会有所影响。
如何在校验方面设置的漂亮些呢?例如填入非法数据后会友好提示。下面我们就通过自动计算的结合来实现一中相对友好的校验方式。
首先对上述报表增加一行,用来显示提示报错内容,例如整个第一行:
再最后增加一列,增加自动计算表达式,然后将其列隐藏:
传入js中的参数为需要验证的单元格表达式,以及需要写入提示信息的单元格id。然后在展现报表的jsp页面中加入javascript。
这里我们需要验证的内容为单元格内容必须是整数且数值大于1000.如果违反规则,则单元格内容变红色,并且在A1单元格中提示。
首先加入通过正则表达式判断整型的js,内容比较简单不做过多介绍:
function isInt(str){
if(isObj(str)){
var reg = /^(-|\+)?\d+$/;
return reg.test(str);
}
return true;
}
function isObj(str){
if(str==null||typeof(str)==’undefined’)
return false;
return true;
}
然后通过润乾的一直内置js来获取焦点单元格的值report1.currCell.value来进行下一步判断.
function getValueIntBy(testvalue,cellName){
alert(cellName);
document.getElementById(cellName).innerText=”";//将提示单元格内容制空
if(!isInt(report1.currCell.value)){//判断焦点单元格类型
report1.currCell.style.color=”#FF0000″; //改变焦点单元格颜色
document.getElementById(cellName).innerText = “请输入整数!!“;//将提示内容输出到A1单元格中
return “”;
}
if(report1.currCell.value>1000){
document.getElementById(cellName).innerText = “请输入1000!!“;
report1.currCell.style.color=”#FF0000″;
}
return “”;
}
最后再将校验规则做到润乾本身的校验中去,并且去除立即校验勾选
在页面中进行测试.输入字符后可看到单元格内容变色,提示框中显示提示.
大于1000时,同样会进行校验:
点提交时才会进行校验,同理如果提交时也不想弹出alert框,只需要自定义提交的js,再里面进行校验,如果返回true的话,调用润乾内置的提交函数_submitTable()。