一種在客戶端利用js實現對資料校驗的方法
阿新 • • 發佈:2019-01-31
通常為了減輕伺服器端的壓力會在客戶端利用js或其他指令碼對使用者填寫的需要提交的資料進行校驗,同時也會帶來使用者體驗的提升。下面介紹一種在客戶端利用js實現對資料進行校驗的方法,僅供參考。
現在假設使用者需要在客戶端通過後臺進行對產品類別的新增操作,利用js實現對產品類別的校驗,校驗規則為:產品的新增只能在所屬類別的葉子節點下進行。
產品類別在新增頁面通過一個下拉框來展現,現在需要做的就是在使用者進行產品新增操作選擇產品類別時對產品類別進行校驗,保證使用者所選的產品類別不能為非葉子節點,當用戶所選的產品類別為非葉子節點時,對使用者進行提醒。
產品類別展現關鍵程式碼如下:
< formaction = "productadd.jsp"method = "post"onsubmit = "return
checkdata()"name = "form">
....
< selectname ="categoryid" >
< optionvalue ="0" > 所有類別</ option >
< scripttype = "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();//通過迴圈取出每個類別
arrLeaf[' <%= index%> ']=' <%=c.isLeaf()? "leaf" :"noleaf" %> ';
//通過定義的isLeaf()方法在伺服器端載入類別時判斷所取到的類別是否為葉子節點,若為葉子節點將
//arrLeaf[index]賦值為:leaf;若為非葉子節點,則將arrLeaf[index]賦值為:noleaf。
</ script>
< optionvalue =" <%= c.getId() %> "
<%= c.getId()==categoryId?"selected" :"" %> > <%=c.getName() %> </option >
<%
index++;
}
%>
</ select>
....
</ form >
對應的js處理函式checkdata()定義如下:
< scripttype ="text/javascript" >
<!--
var arrLeaf= new Array();//定義一個arrLeaf陣列用於記錄每個類別是否為葉子節點
function checkdata(){
if (arrLeaf[document.form.categoryid.selectedIndex]!= "leaf"){
//判斷所選中的類別是否為葉子節點,若不為葉子節點,則進行提示。
alert( "不能選擇非葉子節點" );
document.form.categoryid.focus();
returnfalse ;
}
returntrue ;
}
-->
</ script>
類別類定義如下:
publicclass Category { privateint id ; privateint pid ; private String name ; private String descr ; privateboolean leaf ;//是否為葉子節點 privateint grade ; .... } 產品類定義如下: publicclass Product { privateint id ; private String name ; private String descr ; privatedouble normalPrice ; privatedouble memberPrice ; private Timestamp pdate ; privateint categoryId ;//該欄位參考Category的id欄位 ..... }
< scripttype = "text/javascript" >%>
publicclass Category { privateint id ; privateint pid ; private String name ; private String descr ; privateboolean leaf ;//是否為葉子節點 privateint grade ; .... } 產品類定義如下: publicclass Product { privateint id ; private String name ; private String descr ; privatedouble normalPrice ; privatedouble memberPrice ; private Timestamp pdate ; privateint categoryId ;//該欄位參考Category的id欄位 ..... }