validform表单验证

14 篇文章 0 订阅
13 篇文章 0 订阅

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;
		}
	});
})
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xuesibianxing

学有所沉,不忘初心,回馈社会

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值