一、js代码
$(function (){
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^1(3[0-9]|4[57]|5[0-35-9]|8[0-9]|7[07])\d{8}$/.test(value));
}, "请正确填写您的手机号码。");
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、数字、下划线等字符");
$('form.form-horizontal').validate({
rules:{
//管理员真实姓名
'administrator.truename':{
required:true,
rangelength:[2,20],
stringCheck:true
},
//管理员登陆姓名
'administrator.nickname':{
required:true,
rangelength:[2,16],
},
//密码
'administrator.adminpwd':{
required:true,
minlength:6,
maxlength:18
},
//确认密码
'administrator.adminpwdconfirm':{
required:true,
equalTo:"#administratorpassword"
},
//手机号
'administrator.mobile':{
required:true,
isMobile:true
}
},
messages:{
//管理员真实姓名
'administrator.truename':{
required:'真实姓名不得为空',
rangelength:'请输入{0}-{1}个字符'
},
//管理员登陆姓名
'administrator.nickname':{
required:'登陆姓名不得为空',
rangelength:'请输入{0}-{1}个字符'
},
//密码
'administrator.adminpwd':{
required:'请输入您的密码',
minlength:'密码不得低于{0}位',
maxlength:'密码不得超过{0}位'
},
//确认密码
'administrator.adminpwdconfirm':{
required:'请确认您输入的密码',
equalTo:'两次密码输入不一致'
},
//手机号
'administrator.mobile':{
required:'请输入您的手机号',
}
},
errorElement: "em",
errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".col-md-6" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-md-6" ).addClass( "has-success" ).removeClass( "has-error" );
}
}
)
})
二、HTML部分代码(用了bootstrap框架)
<form class="form-horizontal" role="form" action="<%=request.getContextPath()%>/admin/administrator/add" method="post">
<s:if test="#request.Administrator != null">
<input type="hidden" name="administrator.id" class="form-control"
value="<s:property value='#request.Administrator.id'/>"/>
</s:if>
<div class="row">
<div class="col-md-8">
<s:if test="#request.Administrator == null">
<div class="form-group">
<label class="col-md-4 control-label">管理员真实姓名</label>
<div class="col-md-8">
<input type="text" name="administrator.truename" class="form-control"
value="<s:property value='#request.Administrator.truename'/>"/>
</div>
</div>
</s:if>
<div class="form-group">
<label class="col-md-4 control-label">管理员登陆姓名</label>
<div class="col-md-8">
<input type="text" name="administrator.nickname" class="form-control"
value="<s:property value='#request.Administrator.nickname'/>"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">所属管理组</label>
<div class="col-md-8">
<select name="administrator.groupId" class="chosen-select chosen-transparent form-control">
<s:iterator value='#request.AuthGroupArrayList' var="v">
<option value='<s:property value='#v.id'/>'>
<s:property value='#v.name'/>
</option>
</s:iterator>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">密码</label>
<div class="col-md-8">
<input type="password" id="administratorpassword" name="administrator.adminpwd" class="form-control"
value=""/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">确认密码</label>
<div class="col-md-8">
<input type="password" name="administrator.adminpwdconfirm" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">手机</label>
<div class="col-md-8">
<input type="text" name="administrator.mobile" class="form-control"
value="<s:property value='#request.Administrator.mobile'/>"/>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">邮箱</label>
<div class="col-md-8">
<input type="text" name="administrator.email" class="form-control"
value="<s:property value='#request.Administrator.email'/>"/>
</div>
</div>
</div>
<div class="col-md-4">
<s:if test="#request.Administrator != null">
<!-- tile -->
<section class="tile color transparent-black textured">
<!-- tile header -->
<div class="tile-header">
<h1><strong>详细信息</strong></h1>
</div>
<!-- /tile header -->
<!-- tile body -->
<div class="tile-body">
<div class="row">
<div class="col-md-3">真实姓名:</div>
<div class="col-md-9"><s:property value='#request.Administrator.truename'/></div>
</div>
<div class="row">
<div class="col-md-3">最后登录IP:</div>
<div class="col-md-9"><s:property value='#request.Administrator.last_login_ip'/></div>
</div>
<div class="row">
<div class="col-md-3">最后登录时间:</div>
<div class="col-md-9"><s:date name='#request.Administrator.last_login_time' format="yyyy-MM-DD HH:mm:ss"/></div>
</div>
<div class="row">
<div class="col-md-3">创建时间:</div>
<div class="col-md-9"><s:date name='#request.Administrator.createtime' format="yyyy-MM-DD HH:mm:ss"/></div>
</div>
</div>
<!-- /tile body -->
</section>
<!-- /tile -->
</s:if>
</div>
</div>
<div class="form-group form-footer">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>