fourcal/src/main/resources/templates/admin/act_script_input.ftl

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>

<div class="admin-content">
    <div class="admin-content-body">
        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">工作流程</strong> / <small>流程脚本</small></div>
        </div>
<form method="post" class="am-form" id="tmpForm" action="${base}/actScript/save">
	<!--选项卡（tabs）begin-->
	<div class="am-tabs am-margin" data-am-tabs>
		<ul class="am-tabs-nav am-nav am-nav-tabs">
			<li class="am-active">
				<a href="#tab1">脚本编辑</a>
			</li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-fade am-in am-active" id="tab1">

				<input name="id" id="id" type="hidden" value="${actScript.id!}"/>

				<!--验证表单元素（validate) begin-->
				<!--input begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						脚本名称
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input name="scriptName" class="js-ajax-validate"
								data-validate-async data-validation-message="请输入脚本名称（20字符以内）"
								type="text" id="scriptName" value="${actScript.scriptName!}" minlength="1" maxlength="100"
								placeholder="请输入模型名称（100字符以内）" required  onKeyUp="clearValidInfo()"  />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_name_valid"></div>
				</div>

				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>脚本所在类</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected id="className" name="className" readonly="">
							<#list  classList as l>
								<option value="${l}" <#if actScript.className! == l>selected</#if> >${l!}</option>
							</#list>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>


				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>方法名称</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected id="classMethod" name="classMethod" readonly="">
							<#list  methodList as l>
								<option value="${l}" <#if actScript.classMethod! == l>selected</#if> >${l!}</option>
							</#list>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
		</div>
	</div>
</div>
<!--选项卡（tabs）end-->
<div class="am-margin">
	<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
	<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">返回上一级</button>
</div>
</form>

</div>

</div>

</@defaultLayout.layout>



<script type="text/javascript">

/*名称检验 start*/
var urlBase = "${base}";
var url;


function clearValidInfo(){
    showRoleNameAlert("");
}
function showRoleNameAlert(message){
    var $alert = $("#role_name_valid").find('.am-alert');
    if (!$alert.length) {
        $alert = $('<div class="am-alert am-alert-danger"></div>').hide()
        $alert.appendTo($("#role_name_valid"));
    }
    if(message.length==0){
        $alert.hide();
    }else{
        $alert.text(message).show();
    }
}
/*角色名称检验 end*/


 /*复选框 全选：start*/
    $(".role-authority-checkall").click(function(){
            var $parentNode = $(this).parent().parent();
            var level = Number($parentNode.attr("level"));
            var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
            var isChecked = $(this).is(":checked");
            $allParentNextNode.each(function(){
                var myLevel = Number($(this).attr("level"));
                var $checks = $(this).children().find("input[type='checkbox']");
                if(myLevel > level){
                    return changeCheckedStatus($checks,isChecked);
                }else{
                    return;
                }
            });

            var $checks = $(this).parent().prev().find("input[type='checkbox']");
            changeCheckedStatus($checks,isChecked);
    });

	function changeCheckedStatus(checksObj,isChecked){
		checksObj.each(function(){
			if(isChecked){
				$(this).prop("checked",true);
			}else{
				$(this).prop("checked",false);
			}
		});
	}
/*复选框 全选：end*/

$(function() {
    /*表单验证：begin*/
	//自定义规则，用法：验证元素上加class="js-pattern-sort"
	if ($.AMUI && $.AMUI.validator) {
		$.AMUI.validator.patterns.sort = /^([0-9]+)$/;
	}
	$("#tmpForm").validator({
		// 域通过验证时回调
		onValid: function(validity) {
		  $(validity.field).closest('.am-form-group').find('.am-alert').hide();
		},
		// 域验证通过时添加的操作，通过该接口可定义各种验证提示
		markValid: function(validity) {
			// this is Validator instance
			var $field  = $(validity.field);
			//add by zxl，只对有required属性的字段进行验证
			if(typeof($field.attr("required"))!="undefined"){
				var options = this.options;
				var $parent = $field.closest('.am-form-group');
				$field.addClass(options.validClass).
				  removeClass(options.inValidClass);

				$parent.addClass('am-form-success').removeClass('am-form-error');

				options.onValid.call(this, validity);
			}
		},
		// 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
		onInValid: function(validity) {
		  var $field = $(validity.field);
		  var $group = $field.closest('.am-form-group');
		  var $alert = $group.find('.am-alert');
		  // 使用自定义的提示信息 或 插件内置的提示信息
		  var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

		  if (!$alert.length) {
		    $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
		    appendTo($group.find(".input-msg"));
		  }
		  console.log("onInValid : "+$field.val());
		  $alert.html(msg).show();
		}
	});
	/*表单验证：end*/



});


</script>
<style type="text/css">
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
</style>