一种在客户端利用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字段

            .....

             }