添加角色页面增加表单验证

src/main/webapp/WEB-INF/view/system/role/role_add.html

 @layout("/common/_container.html"){
 <div class="ibox float-e-margins">
 	<div class="ibox-content">
-		<div class="form-horizontal">
+		<div class="form-horizontal" id="validateForm">
 		
 			<input type="hidden" id="id" value="">
 

src/main/webapp/static/modular/system/role/role_info.js

@@ -2,145 +2,182 @@
  * 角色详情对话框（可用于添加和修改对话框）
  */
 var RolInfoDlg = {
-	roleInfoData : {},
-	deptZtree : null,
-	pNameZtree : null
+    roleInfoData: {},
+    deptZtree: null,
+    pNameZtree: null,
+    validateFields: {
+        name: {
+            validators: {
+                notEmpty: {
+                    message: '用户名不能为空'
+                }
+            }
+        },
+        tips: {
+            validators: {
+                notEmpty: {
+                    message: '别名不能为空'
+                }
+            }
+        },
+        pName: {
+            validators: {
+                notEmpty: {
+                    message: '父级名称不能为空'
+                }
+            }
+        }
+    }
 };
 
 /**
  * 清除数据
  */
-RolInfoDlg.clearData = function() {
-	this.roleInfoData = {};
-}
+RolInfoDlg.clearData = function () {
+    this.roleInfoData = {};
+};
 
 /**
  * 设置对话框中的数据
- * 
+ *
  * @param key 数据的名称
  * @param val 数据的具体值
  */
-RolInfoDlg.set = function(key, val) {
-	this.roleInfoData[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
-	return this;
-}
+RolInfoDlg.set = function (key, val) {
+    this.roleInfoData[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
+    return this;
+};
 
 /**
  * 设置对话框中的数据
- * 
+ *
  * @param key 数据的名称
  * @param val 数据的具体值
  */
-RolInfoDlg.get = function(key) {
-	return $("#" + key).val();
-}
+RolInfoDlg.get = function (key) {
+    return $("#" + key).val();
+};
 
 /**
  * 关闭此对话框
  */
-RolInfoDlg.close = function() {
-	parent.layer.close(window.parent.Role.layerIndex);
-}
+RolInfoDlg.close = function () {
+    parent.layer.close(window.parent.Role.layerIndex);
+};
 
 /**
  * 点击部门input框时
- * 
+ *
  * @param e
  * @param treeId
  * @param treeNode
  * @returns
  */
-RolInfoDlg.onClickDept = function(e, treeId, treeNode) {
-	$("#deptName").attr("value", RolInfoDlg.deptZtree.getSelectedVal());
-	$("#deptid").attr("value", treeNode.id);
-}
+RolInfoDlg.onClickDept = function (e, treeId, treeNode) {
+    $("#deptName").attr("value", RolInfoDlg.deptZtree.getSelectedVal());
+    $("#deptid").attr("value", treeNode.id);
+};
 
 /**
  * 点击父级菜单input框时
- * 
+ *
  * @param e
  * @param treeId
  * @param treeNode
  * @returns
  */
-RolInfoDlg.onClickPName = function(e, treeId, treeNode) {
-	$("#pName").attr("value", RolInfoDlg.pNameZtree.getSelectedVal());
-	$("#pid").attr("value", treeNode.id);
-}
+RolInfoDlg.onClickPName = function (e, treeId, treeNode) {
+    $("#pName").attr("value", RolInfoDlg.pNameZtree.getSelectedVal());
+    $("#pid").attr("value", treeNode.id);
+};
 
 /**
  * 显示部门选择的树
- * 
+ *
  * @returns
  */
-RolInfoDlg.showDeptSelectTree = function() {
-	Feng.showInputTree("deptName","deptContent");
-}
+RolInfoDlg.showDeptSelectTree = function () {
+    Feng.showInputTree("deptName", "deptContent");
+};
 
 /**
  * 显示父级菜单的树
- * 
+ *
  * @returns
  */
-RolInfoDlg.showPNameSelectTree = function() {
-	Feng.showInputTree("pName","pNameContent");
-}
+RolInfoDlg.showPNameSelectTree = function () {
+    Feng.showInputTree("pName", "pNameContent");
+};
 
 /**
  * 收集数据
  */
-RolInfoDlg.collectData = function() {
-	this.set('id').set('name').set('pid').set('deptid').set('tips').set('num');
-}
+RolInfoDlg.collectData = function () {
+    this.set('id').set('name').set('pid').set('deptid').set('tips').set('num');
+};
+
+/**
+ * 验证数据是否为空
+ */
+RolInfoDlg.validate = function () {
+    $('#validateForm').data("bootstrapValidator").resetForm();
+    $('#validateForm').bootstrapValidator('validate');
+    return $("#validateForm").data('bootstrapValidator').isValid();
+};
 
 /**
  * 提交添加用户
  */
-RolInfoDlg.addSubmit = function() {
-	
-	this.clearData();
-	this.collectData();
-	
-	//提交信息
-	var ajax = new $ax(Feng.ctxPath + "/role/add", function(data){
-		Feng.success("添加成功!");
-		window.parent.Role.table.refresh();
-		RolInfoDlg.close();
-	},function(data){
-		Feng.error("添加失败!" + data.responseJSON.message + "!");
-	});
-	ajax.set(this.roleInfoData);
-	ajax.start();
-}
+RolInfoDlg.addSubmit = function () {
+
+    this.clearData();
+    this.collectData();
+    if (!this.validate()) {
+        return;
+    }
+
+    //提交信息
+    var ajax = new $ax(Feng.ctxPath + "/role/add", function (data) {
+        Feng.success("添加成功!");
+        window.parent.Role.table.refresh();
+        RolInfoDlg.close();
+    }, function (data) {
+        Feng.error("添加失败!" + data.responseJSON.message + "!");
+    });
+    ajax.set(this.roleInfoData);
+    ajax.start();
+};
 
 /**
  * 提交修改
  */
-RolInfoDlg.editSubmit = function() {
-	
-	this.clearData();
-	this.collectData();
-	
-	//提交信息
-	var ajax = new $ax(Feng.ctxPath + "/role/edit", function(data){
-		Feng.success("修改成功!");
-		window.parent.Role.table.refresh();
-		RolInfoDlg.close();
-	},function(data){
-		Feng.error("修改失败!" + data.responseJSON.message + "!");
-	});
-	ajax.set(this.roleInfoData);
-	ajax.start();
-}
-
-$(function() {
-	var deptTree = new $ZTree("deptTree", "/dept/tree");
-	deptTree.bindOnClick(RolInfoDlg.onClickDept);
-	deptTree.init();
-	RolInfoDlg.deptZtree = deptTree;
-	
-	var pNameTree = new $ZTree("pNameTree", "/role/roleTreeList");
-	pNameTree.bindOnClick(RolInfoDlg.onClickPName);
-	pNameTree.init();
-	RolInfoDlg.pNameZtree = pNameTree;
+RolInfoDlg.editSubmit = function () {
+
+    this.clearData();
+    this.collectData();
+
+    //提交信息
+    var ajax = new $ax(Feng.ctxPath + "/role/edit", function (data) {
+        Feng.success("修改成功!");
+        window.parent.Role.table.refresh();
+        RolInfoDlg.close();
+    }, function (data) {
+        Feng.error("修改失败!" + data.responseJSON.message + "!");
+    });
+    ajax.set(this.roleInfoData);
+    ajax.start();
+};
+
+$(function () {
+    Feng.initValidator("validateForm", RolInfoDlg.validateFields);
+
+    var deptTree = new $ZTree("deptTree", "/dept/tree");
+    deptTree.bindOnClick(RolInfoDlg.onClickDept);
+    deptTree.init();
+    RolInfoDlg.deptZtree = deptTree;
+
+    var pNameTree = new $ZTree("pNameTree", "/role/roleTreeList");
+    pNameTree.bindOnClick(RolInfoDlg.onClickPName);
+    pNameTree.init();
+    RolInfoDlg.pNameZtree = pNameTree;
 });