共计 1536 个字符，预计需要花费 4 分钟才能阅读完成。
validform 插件主要把所有的验证条件和验证提示信息绑定到每个表单元素，这种形式非常方便，下面写法更加智能得到 label 内容来提示
【1】引入 js 脚本：
<link href=”${ctx}/assets/css/validform.css” rel=”stylesheet” type=”text/css” />
<script src=”${ctx}/assets/js/validform_min.js”></script>
【2】html：
<form action=”${ourl}/insert” class=”form-horizontal form-bordered” method=”post” id=”validform”>
<div class=”form-group”>
<label class=”control-label col-md-3″> 类型 </label>
<div class=”col-md-4″>
<select class=”form-control” data-width=”100%” name=”equipment.categoryId” id=”equipmentCategory”>
<option value=””>– 请选择 –</option>
<c:forEach items=”${equipmentCategoryList}” var=”obj”>
<option value=”${obj.id}” <c:if test=”${obj.id eq equipment.categoryId}”>selected</c:if> >${obj.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class=”form-group”>
<label class=”control-label col-md-3″> 设备名称 </label>
<div class=”col-md-4″>
<input class=”form-control inputxt” type=”text” value=”${equipment.name}” name=”equipment.name”/>
</div>
</div>
</form>
【3】js 脚本：
// 添加验证
$(function(){
var demo=$(“#validform”).Validform({// 指明是哪一表单需要验证, 名称需加在 form 表单上;
tiptype:3
,label:”.control-label”
,showAllError:true
,ignoreHidden:true
,datatype:{
“zh1-6″:/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
,”Aa1″:/^[A-Za-z0-9]+$/
}
});
demo.addRule([
{
ele:”.inputxt”
,datatype:”*1-256″
},
{
ele:”select”//<option value=””>– 请选择 –</option>, 这一项的值为空，否则无效
,datatype:”*”// 也可以写到 input 标签里
}
]);
// 阻止表单提交 (这是一种形式，因为还没找到两者比较时候的判断)
$(“#submit”).click(function(event) {
var highest = $(“#highest”).val();
var lowest = $(“#lowest”).val();
if(highest <= lowest){
alert(“ 最高层熟不能小于最低层数 ”);
return false;// 禁止提交
}
if(lowest > 2){
alert(“ 最低层数不能大于 1 ”);
return false;
}
});
})