通常为了减轻服务器端的压力会在客户端利用js或其他脚本对用户填写的需要提交的数据进行校验,同时也会带来用户体验的提升。下面介绍一种在客户端利用js实现对数据进行校验的方法,仅供参考。
现在假设用户需要在客户端通过后台进行对产品类别的添加操作,利用js实现对产品类别的校验,校验规则为:产品的添加只能在所属类别的叶子节点下进行。
产品类别在添加页面通过一个下拉框来展现,现在需要做的就是在用户进行产品添加操作选择产品类别时对产品类别进行校验,保证用户所选的产品类别不能为非叶子节点,当用户所选的产品类别为非叶子节点时,对用户进行提醒。
产品类别展现关键代码如下:
<
form
action
=
"productadd.jsp"
method
=
"post"
onsubmit
=
"return checkdata()"
name
=
"form"
>
....
<
select
name
=
"categoryid"
>
<
option
value
=
"0"
>
所有类别
</
option
>
<
script
type
=
"text/javascript"
>
arrLeaf[0]=
"noleaf"
;//默认显示的所有类别标记为非叶子节点
</
script
>
<%
int
index=1;
List<Category> categories=Category.getCategories();//获取所有类别
for
(Iterator<Category> it=categories.iterator();it.hasNext(); ){
Category c=it.next();//通过循环取出每个类别
%>
<
script
type
=
"text/javascript"
>
arrLeaf['
<%=
index
%>
']='
<%=
c.isLeaf()?
"leaf"
:
"noleaf"
%>
';
//通过定义的isLeaf()方法在服务器端加载类别时判断所取到的类别是否为叶子节点,若为叶子节点将
//
arrLeaf[index]赋值为:leaf;
若为非叶子节点,则将
arrLeaf[index]赋值为:noleaf。
</
script
>
<
option
value
=
"
<%=
c.getId()
%>
"
<%=
c.getId()==categoryId?
"selected"
:
""
%>
>
<%=
c.getName()
%>
</
option
>
<%
index++;
}
%>
</
select
>
....
</
form
>
对应的js处理函数checkdata()定义如下:
<
script
type
=
"text/javascript"
>
<!--
var
arrLeaf=
new
Array();//定义一个arrLeaf数组用于记录每个类别是否为叶子节点
function
checkdata(){
if
(arrLeaf[document.form.categoryid.selectedIndex]!=
"leaf"
){
//判断所选中的类别是否为叶子节点,若不为叶子节点,则进行提示。
alert(
"不能选择非叶子节点"
);
document.form.categoryid.focus();
return
false
;
}
return
true
;
}
-->
</
script
>
类别类定义如下:
public
class
Category {
private
int
id
;
private
int
pid
;
private
String
name
;
private
String
descr
;
private
boolean
leaf
;
//是否为叶子节点
private
int
grade
;
....
}
产品类定义如下:
public
class
Product {
private
int
id
;
private
String
name
;
private
String
descr
;
private
double
normalPrice
;
private
double
memberPrice
;
private
Timestamp
pdate
;
private
int
categoryId
;
//该字段参考Category的id字段
.....
}