validform表单验证

更新时间:2019-03-14 17:35:00点击次数:456次
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>
1
2
【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;
}
});
})

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息