jQuery验证使用
首先要加载jquery.js与jquery.validate.js两个文件。
<script type="text/javascript" src="js/jquery.ui.1.8.2.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
然后可以写验证规则,与错误提示语,也可以写自定义的验证函数。
这里的验证一般针对于html表单中的各种控件。根据它们的名字进行验证。
<script type="text/javascript"> //自定义函数验证日期大小 $.validator.addMethod("greaterThan", function(value, element, params) { if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) >= new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); },'Must be greater than {0}.'); $(document).ready(function() { //一些验证规则 $("#form1").validate({ rules: { //标题不能为空 title: "required",// simple rule, converted to {required:true} //描述不能为空 DESCRIPTION: "required", //开始日期不能为空 start_date: "required", //有两种验证,一种是不能为空,一种是调用自定义函数,结束时间必须大于等于开始时间 end_date: { required: true, greaterThan: "#start_date" }, //州id必须大于1 state_id:{ min:1 }, //email 必须正确,并且不能为空 email: {// compound rule required: true, email: true }, url: { url: true }, comment: { required: true } }, messages: { title: "The title field is required.", start_date: "Start date is required.", state_id:"Please select the proper state", //针对必须与结束日期大于开始日期的两种提示语 end_date: { required: "End date is required.", greaterThan: "End date must be greater than Start date." }, DESCRIPTION: "Description is required." } }); }); </script>
然后可以修改一下错误提示的样式。
<style type="text/css"> label.error { position: relative; left: 285px; top:-125px; width: 205px; display: inline; color: red; white-space:nowrap; font-size:12px; font-family:Arial; } .error { color: #FFFFFF; font-family: Arial; font-size: 22px; font-weight: bold; margin-bottom: 0px; margin-top: 0px; text-align: left; } </style>
做了上述的工作之后,如果表单提交了,jQuery 就会对数据进行相应的验证工作,并将错误提示显示在界面上。
更多验证知识,还要结合实例进行摸索,学习。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用