以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点:
1、拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写)。
2、必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象。
3、影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服。
4、ajax验证不方便,现在的系统越来越注重客户的用户体验,所以ajax验证必不可少,但是微软的验证控件并没有提供ajax验证(当然你也可以通过微软的UpdatePanel来进行),需要自己去扩展。
说了上面那么多,我只是表明我的意思,微软的验证控件不太好用,所以这时候我就在想有没一些好用点的验证控件呢?
有2个方法:1、自己编写一个(考虑到自己水平还没那么高,想想还是算了)
2、去找一个已经完善的验证控件(这个比较靠谱,毕竟我做不到,别人还是能做到的)
所以按照我的要求:1、不用拖控件
2、不影响页面代码
3、简单的AJAX验证
去网络搜寻找到了2种类型的:1、自己编写的ASP.NET验证控件,虽然封装了比较多的功能但是还是满足不了我需求
2、javascript类型的验证函数库,这个比较靠谱,毕竟js可以和页面代码分离(不影响页面代码),只需要调用函数库里的验证代码就可以进行指定对象的验证了(不用拖控件),同时ajax本质还是要靠javascript来调用(AJAX验证)
所以我根据上面第2条线索就搜索使用javascript编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件,是由bassistance.de编写的,bassistance.de还提供许多jQuery其他插件,如Accordion,Autocomplete(我的使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)就是基于这个autocomplete编写的),Tooltip等等(具体的可以上他们的网站查看)。
决定使用jQuery.Validate首先下载其JS插件:
进入http://bassistance.de/jquery-plugins/jquery-plugin-validation/选择DownLoad下载,里面包含了许多示例可供我们学习
接下来我们就开始正式使用了,建立一个基本的网站,建立好一个母版页(这边使用母版页是因为具体的一些项目中都会有一个母版页来存放一些公用的东西,这边为了模拟一个真实的环境,所以建立母版页,如果觉得不需要可以不建立直接建立页面即可),然后把jQuery和jQuery.Validate都引入母版页:
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/scripts/jquery.validate1.js") %>' type="text/javascript"></script>
小技巧:与一般的引用不同,我这边把脚本的路径采用Page.ResolveClientUrl进行获取,由于在一些项目开发中,不同模块的代码会分不同的目录来操作,而母版页一半是在网站的根目录所以为了保证所有页面的基本都可以引用到,所以需要将路径进行重新获取(不过这样做也有不好之处就是这样无法在后台的代码中动态为<header>添加东西,编译器会报错,解决办法是在<header>中放入一个literal控件,在后台代码里重新拼字符串赋给literal)。
在引用完基本所需的脚本后就在母版页中添加脚本来进行验证。
jQuery.Validate是监控form,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需
要在jQuery(document).ready()时为form进行验证注册
具体代码如下:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#<%=form1.ClientID %>").validate();
});
</script>
</body>
到这边肯定会有人疑问了,为什么要把jQuery.Validate的代码写在页面的<body>中,这点牵扯到验证规则制定和分组验证的方法将会在中级篇和高级篇中讲解。
注册完验证监控后我们就可以开始编写具体的验证代码了,我们通过母版页建立一个子页面,在页面里放几个基本的输入框代码如下:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><%@ Page Title="员工信息管理-初级验证" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Base.aspx.cs" Inherits="_Base" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table cellpadding="1" cellspacing="1" border="1" width="50%" align="center">
<tr>
<td>
用户名
</td>
<td>
<asp:TextBox ID="txtUid" runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>
年龄
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="number"></asp:TextBox>
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" CssClass="email"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="Button1" runat="server" Text="提交" />
</td>
</tr>
</table>
</asp:Content>
上面的代码中我已经完成了对用户名,姓名,年龄,邮箱的验证了,不知道你发现了没,就是在每个textbox中的class样式,其中required表示必填,number表示必须是数字,email表示必须是电子邮件格式,如果写成required email表示这个字段必须填写同时必须是email格式。
怎么样?是不是相当的简单,省去了拖控件,指定验证控件等啰嗦的代码,仅仅一个【样式名】就搞定了,当然jQuery.Validate还提供许多验证方法,如日期,范围,最大值,最小值,整数,值比较等多种验证方式,同时你还可以自定义验证方式(当然这种自定义验证方式在初级篇不会将到,请期待中级高级篇)。
好了,我们点下提交按钮看下运行的效果:
不错,果然验证成功了,但是有个问题,怎么提示信息全是英文的?
我们查看下jQuery.Validate源代码,在236行果然有提示消息的定义方式,我们就可以进行修改这边的消息改成中文的方式,或者自定义了一个中文的消息jQuery.Validate.message_cn.js,然后使用jQuery.extend来覆盖jQuery.Validate自身的消息,代码如下:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//定义中文消息
var cnmsg = {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);
这样只需在母版页里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了,2种方式都是可取的,如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码,如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
然后我们重新刷新下页面,果然全变成中文了。看下效果:
注意:这边错误提示消息的样式是可以自己定义的,我就修改了原有的样式,加上了个错误图标,更加好看点,样式定义如下:
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--> <style type="text/css">
/************jQuery.Validate插件样式开始********************/
label.error
{
background: url(images/error.png) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
input.error
{
border: dashed 1px red;
}
/************jQuery.Validate插件样式结束********************/
</style>
到此,使用jQuery.Validate进行客户端验证的初级篇就写完了,具体的代码大家可以下载下面的源代码查看,敬请期待中级篇和高级篇。
PS:1、代码中jquery.validate.js为官方版本,而jquery.validate1.js为我修改的版本,关于修改的内容在中级篇和高级篇我会讲到。
2、jQuery.Validate仅能做客户端验证,并不能代替服务器端验证,为了系统的安全所以服务器端还是要进行验证的。
分享到:
相关推荐
在本文中,我们将探讨如何使用jQuery Validate库进行客户端验证,并解释为什么在某些情况下不使用微软的验证控件。jQuery Validate是一个强大的JavaScript库,专门用于处理HTML表单验证,它为开发者提供了灵活且易于...
10. **脚本技能**:掌握JavaScript、jQuery和AJAX,以及zTree、validate和jQuery UI插件,用于增强前端交互体验。 11. **JBPM工作流**:熟悉JBPM,包括表结构、流程实例、任务和流程变量,以及任务分配和事件处理。...
内容概要:本文详细介绍了如何利用A*算法改进传统的往返式路径规划,解决扫地机器人在复杂环境中容易卡住的问题。首先构建了一个可视化的栅格地图用于模拟环境,然后引入了优先级运动规则,使机器人能够有规律地进行往返清扫。当遇到死角时,通过A*算法计算最佳逃生路径,确保机器人能够顺利脱困并继续完成清扫任务。实验结果显示,改进后的算法显著提高了清洁覆盖率,降低了路径重复率。此外,还讨论了一些潜在的优化方向,如动态调整启发函数权重、断点续传以及能耗模型等。 适合人群:对路径规划算法感兴趣的科研人员、自动化专业学生、扫地机器人开发者。 使用场景及目标:适用于需要高覆盖率和低重复率的室内清洁任务,旨在提高扫地机器人的工作效率和智能化水平。 其他说明:文中提供了详细的Matlab代码实现,并附带了仿真测试结果,有助于读者理解和复现该算法。
爬取喜马拉雅听书(1)
安卓向上传递数据学习笔记总结
1、文件说明: Centos8操作系统tigervnc-selinux-1.11.0-9.el8.rpm以及相关依赖,全打包为一个tar.gz压缩包 2、安装指令: #Step1、解压 tar -zxvf tigervnc-selinux-1.11.0-9.el8.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm
内容概要:本文详细介绍了户外储能电源双向逆变器板的技术资料及其特点。涵盖原理文件、PCB文件、源代码、电感与变压器规格参数等,适用于2KW(最大3KW)的户外储能电源。文中强调了双向软开关DC-DC设计、两颗M0+ 32位MCU的分工、SPWM调制方式、H桥IGBT的应用、详细的电气参数和技术特性。此外,还包括了SPWM信号生成代码示例、硬件设计细节、生产注意事项等。 适合人群:从事户外储能电源开发的技术人员、电子工程师、产品经理等。 使用场景及目标:帮助开发者快速掌握双向逆变器板的设计和生产要点,缩短产品研发周期,提高产品质量和可靠性。具体应用场景包括但不限于户外应急电源、便携式储能设备等。 其他说明:本文提供了丰富的技术细节和实践经验,如双向软开关DC-DC设计、SPWM调制、IGBT驱动、EMC整改记录等,有助于解决实际开发中的难题。同时,附带的实际案例展示了该方案的成功应用,进一步证明了其可行性和优越性。
电子仿真教程,从基础到精通,每个压缩包15篇教程,每篇教程5000字以上。
内容概要:美国计算机学会(ACM)是一个成立于1947年的国际性计算机专业组织,致力于推动计算机科学的发展,提供教育、资源和专业发展机会。ACM的使命是促进计算机科学和信息技术领域的进步,愿景是成为全球计算机专业人士的首选组织。其核心价值包括卓越、诚信、包容性、合作和创新。ACM定期举办学术会议,如SIGGRAPH和图灵奖颁奖典礼,出版高质量的学术期刊和会议论文集,涵盖人工智能、软件工程、网络安全等领域。此外,ACM还提供在线课程、研讨会、认证项目等教育资源,以及职业规划、网络机会和领导力培训等职业发展服务。ACM图灵奖被誉为“计算机界的诺贝尔奖”,每年颁发给对计算机科学和技术做出重大贡献的个人。; 适合人群:计算机科学领域的专业人士、教育工作者、工程师和学生。; 使用场景及目标:①了解计算机科学领域的最新研究成果和发展趋势;②获取高质量的教育资源和职业发展机会;③参与计算机科学领域的学术交流和合作。; 其他说明:ACM作为一个全球性的组织,在教育、研究和行业实践中发挥着重要作用,推动了技术创新和社会进步。
logstash-8.17.4-windows-x86_64.zip
springboot 一个基于Springboot使用Aspect实现一个切面,以记录日志为例
音箱底部折边设备sw22可编辑_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip
内容概要:本文详细介绍了如何使用Python、Django和MySQL构建一个完整的个性化图书推荐系统。系统从前端界面设计、后端逻辑实现到数据库设计,涵盖了用户管理、图书管理、评分系统等功能模块。重点讲解了基于用户和项目的协同过滤算法实现,以及在用户评分数据不足时的标签推荐备份方案。此外,还包括了系统部署、测试和优化的具体步骤,如云服务器部署、性能测试、数据库优化等。 适合人群:具备一定Python和Web开发基础的研发人员,尤其是对推荐系统感兴趣的技术爱好者。 使用场景及目标:适用于希望深入了解图书推荐系统的工作原理和实现细节的技术人员。目标是帮助读者掌握从零开始搭建一个完整的个性化推荐系统的方法,包括前后端开发、算法实现和系统部署。 其他说明:文中提供了大量代码示例和实战经验,如数据库设计、爬虫实现、权限管理等,有助于读者更好地理解和应用相关技术。
Ai和python学习资料
文本摘要
冲击试验机sw22_三维3D设计图纸_包括零件图_机械3D图可修改打包下载_三维3D设计图纸_包括零件图_机械3D图可修改打包下载.zip
内容概要:本文详细介绍了MyBatis Plus(MP),它是MyBatis的增强工具,旨在简化CRUD操作、提高开发效率。其主要功能包括内置分页插件、简化CRUD操作以及代码生成器。使用时只需引入相应依赖,自定义Mapper接口继承BaseMapper泛型接口,并通过实体类反射获取数据库表信息。文章还介绍了常用注解如@TableName、@TableId、@TableField、@TableLogic和@Version,配置项如全局配置、类型别名和Mapper文件路径,以及核心功能如批量插入、分页查询、条件构造器(Wrapper)等。此外,扩展功能涵盖逻辑删除、枚举处理器和JSON处理器,插件功能则包括分页插件的配置和使用。 适合人群:具备一定Java开发经验,尤其是熟悉MyBatis框架的开发者,特别是那些希望提高开发效率、减少重复代码的工作1-3年研发人员。 使用场景及目标:①简化数据库操作,提高开发效率;②快速生成代码,减少手动编写SQL语句的工作量;③实现分页查询、逻辑删除、枚举和JSON字段处理等高级功能,提升应用的灵活性和可维护性。 其他说明:本文不仅提供了MyBatis Plus的功能介绍和使用方法,还深入探讨了条件构造器(Wrapper)的使用技巧,帮助开发者更好地理解和掌握这一强大的工具。在实际开发中,合理利用这些功能可以显著提高开发效率和代码质量。建议在学习过程中结合具体项目实践,逐步掌握各个功能的应用场景和最佳实践。
电子仿真教程,从基础到精通,每个压缩包15篇教程,每篇教程5000字以上。
这个是完整源码 SpringBoot + vue 实现 【java毕业设计】Springboot+Vue高考志愿填报系统 源码+sql脚本+论文 完整版 数据库是mysql 随着高考制度的不断完善和高等教育资源的日益丰富,高考志愿填报成为考生和家长关注的焦点。本文旨在开发一个基于Spring Boot后端框架、Vue.js前端框架和实现以下功能:考生信息管理、院校信息查询、专业信息查询、志愿填报、志愿评测等。通过Spring Boot框架构建后端服务,提供 API接口与前端进行交互;Vue.js框架用于构建前端用户界面,实现数据的动态展示和交互操作;MySQL数据库用于存储考生信息、院校信息、专业信息等数据。 在系统设计过程中,我们充分考MySQL数据库的高考志愿填报系统,提高志愿填报的效率和准确性,为考生和家长提供便捷的服务。 系统主要实现以下功能:考分考MySQL数据库的高考志愿填报系统,提高志愿填报的效率和准确性,为考生和家长提供便捷的服务生信息管理、院校信息查询、专业信息查询、志愿填报、志愿评测等。通过Spring Boot框架构建后端服务,提供 API接口与前端进行交互;Vue.js框架用于构建前端用户界面,实现数据的动态展示和交互操作;MySQL数据库用于存储考生信息、院校信息、专业信息等数据。 在系统设计过程中,我们充分考虑了系统的易用性、可扩展性和安全性。通过合理的数据库设计和优化,提高了系统的查询效率。同时,采用Spring Security等安全框架对系统进行安全防护,确保数据的安全性。 本文详细阐述了系统的需求分析、设计、实现和测试过程,并对关键技术和实现难点进行了深入探讨。通过实验验证,本系统能够满足高考志愿填报的基本需求,为考生和家长提供了高效、便捷的服务。此外,本文还对系统未来的发展方向和改进空间进行了展望,以期进一步完善系统功能,提高用户体验。
内容概要:本文详细介绍了基于MATLAB实现的两种经典特征选择算法——向后搜索(SBS)和向前搜索(SFS)。首先通过构造简单的虚拟数据集展示了这两个算法的基本思想和实现步骤。接着深入探讨了SBS和SFS的具体实现方式,包括特征集的初始化、特征的选择/剔除机制以及评价函数的设计。文中还提供了具体的MATLAB代码示例,帮助读者更好地理解和应用这两种算法。此外,文章讨论了SBS和SFS的特点和局限性,并给出了在实际工程项目中的选型建议。 适合人群:对特征选择有一定兴趣并希望深入了解SBS和SFS算法的初学者,尤其是那些希望通过MATLAB进行特征选择研究的人群。 使用场景及目标:适用于需要从大量特征中挑选出最具影响力的少数特征的情况,如生物医学数据分析、图像识别等领域。主要目标是提高模型性能的同时减少计算成本。 其他说明:尽管SBS和SFS属于较为基础的特征选择方法,在现代工业级项目中已被更先进的算法所替代,但对于理解特征选择的基本原理仍然非常重要。同时,文章强调了评价函数设计的重要性,并指出在实际应用中应综合考虑业务背景和技术因素。