如下图,当执行提交操作之前,我们需要对序号,要求完成时间,责任人,措施内容四项进行非空,字符长度及输入内容的类型进行校验.
直接贴样式代码
<div class="wrapper animated fadeInRight"> <form id="form" class="form-horizontal m"> <div class="form-group"> <label class="col-sm-3 control-label ">序号<font class="red"> *</font></label> <div class="col-sm-8"> <input id="longEventId" col="LongEventId" type="hidden" class="form-control" /> <input id="stepNo" name="stepNoName" col="StepNo" type="number" class="form-control" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label ">要求完成时间<font class="red"> *</font></label> <div class="col-sm-8"> <input id="finishTime" name="finishTime" col="FinishTime" type="text" class="time-input form-control" autocomplete="off" placeholder="要求完成时间" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label ">责任人<font class="red"> *</font></label> @*<input id="personLiableId" col="PersonLiableId" type="text" class="form-control" />*@ @await Html.PartialAsync("/Areas/SystemManage/Shared/SystemUserIdSelect.cshtml", new ViewDataDictionary(this.ViewData) { { "Content", "8" }, { "IsMultiple", "false" } }) <input id="userId" name="userIdName" col="PersonLiableId" type="hidden" class="form-control" /> </div> <div class="form-group"> <label class="col-sm-3 control-label ">改善对策</label> <div class="col-sm-8"> <textarea id="basicReason" col="BasicReason" class="form-control" style="height:60px"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label ">措施内容<font class="red"> *</font></label> <div class="col-sm-8"> <textarea id="stepContent" name="stepContentName" col="StepContent" class="form-control" style="height:60px"></textarea> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label ">图片</label> <div class="col-sm-8"> <div id="stepPic" class="img-box"></div> </div> </div> </form> </div>
下面为文本输入检测代码
<script type="text/javascript"> $(function () { laydate.render({ elem: '#finishTime', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' }); $('#form').validate({ rules: { stepNoName: {required: true}, finishTime: {required: true}, userId:{required: true}, stepContentName: {required: true, maxlength: 300 } } }); }); function saveForm(index) { var userI = $("#userId").val(); if (userI == "" || userI == null || userI == undefined) { ys.msgError("请选择责任人!"); return; } if ($('#form').validate().form()) { var postData = $('#form').getWebControls({Id: id }); postData.StepPic = $("#stepPic").imageUpload("getImageUrl"); ys.ajax({ url: '@Url.Content("~/LongEventManage/LongMeasuresManage/SaveFormJson")', type: 'post', data: postData, success: function (obj) { if (obj.Tag == 1) { ys.msgSuccess(obj.Message); parent.searchGrid(); parent.layer.close(index); }else { ys.msgError(obj.Message); } } }); } } </script>
先看下当点击提交的时候的效果图:
当我们点击提交时,序号,要求完成时间,措施内容都提示是必填字段.
因此当提交时,这个表单验证是不会通过的,也就不会执行ajax请求调用提交方法.
if ($('#form').validate().form()) { var postData = $('#form').getWebControls({Id: id }); postData.StepPic = $("#stepPic").imageUpload("getImageUrl"); ys.ajax({ url: '@Url.Content("~/LongEventManage/LongMeasuresManage/SaveFormJson")', type: 'post', data: postData, success: function (obj) { if (obj.Tag == 1) { ys.msgSuccess(obj.Message); parent.searchGrid(); parent.layer.close(index); }else { ys.msgError(obj.Message); } } }); } }
咱们接着往下实验,如果此时我们输入了措施内容,但是字符大于规定的300长度时,
stepContentName: {required: true, maxlength: 300 }
关于rules的key,其实指向的<input />中的name,之前我选择的是id,但是却没有生效,必须指向他的name名称.
细心的小伙伴,有没有发现,我的完成时间,为什么没有用name,而是还用的id名称?
<input id="stepNo" name="stepNoName" col="StepNo" type="number" class="form-control" />
<input id="finishTime" name="finishTimeName" col="FinishTime" type="text" class="time-input form-control" autocomplete="off" placeholder="要求完成时间" />
$('#form').validate({
rules: {
stepNoName: {required: true},
finishTime: {required: true},
userId:{required: true},
stepContentName: {required: true, maxlength: 300 }
}
});
});
因为上面的<script>代码中,我使用了layUI框架对时间选择器的修饰导致name没有生效.
laydate.render({
elem: '#finishTime',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss'
});
其实我们从F12也可以看出,完成时间input框他的name也是finishTime.所以还是用的name作为Key.

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!