一种在客户端利用js实现对数据校验的方法

   通常为了减轻服务器端的压力会在客户端利用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字段

            .....

              }