validform表单考证

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;
        }
    });
})
    原文作者:学问思辨行
    原文地址: https://segmentfault.com/a/1190000018426565
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞