特玩传送门
网络游戏热门移动社区sponsored links
jQuery 教程 (十一) 实战表单验证与自动完成提示插件 .NET
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest).二.前言研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但是都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插件需要很高成本, 如果发现了Bug并修复需要的成本也是未知数(本次我花了较少的时间解决了自动完成提示插件的一个中文bug, 但是如果复杂的bug就不会这么简单了.).对于简单应用我首先推荐上文中的jQuery UI. 但是jQuery UI解决的问题有限. 使用jQuery插件是我们最后的一个好办法---还算是好办法, 起码比自己开发要好吧?很多jQuery的插件编码异常优美, 看一看艺龙首页现在的城市输入框控件, 除了需要为输入框手工添加很多很多属性(onkeyup, onkeydown等等), 而且还不够通用, 占用服务器资源和网络资源.但是当初也是花费了很久的时间完成的作品.站在巨人的肩膀上, 让我感觉写脚本和写设计C#程序一样, 都有高度和深度可以挖掘. 除了使用作者开发好的功能, 还可以学习如何开发和封装javascript控件. 看过优秀的jQuery插件作者的代码和设计思想后, 常常自叹设计水平差距居然如此之大, 增加自认为脚本高手, 比较过后就是C#程序员和架构师之间的差距.希望大家通过本章节介绍的两个插件, 除了学会如何使用, 还能够略微领悟到如何封装和设计javascript控件.三.表单验证插件 validate在提交表单前常要对用户输入进行校验.ASP.NET的验证控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.在比较了若干表单验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.插件首页:http://bassistance.de/jquery-plugins/jquery-plugin-validation/插件文档:http://docs.jquery.com/Plugins/Validation配置说明:http://docs.jquery.com/Plugins/Validation/validate#options1.应用实例实例效果:实例代码:&%@ Page Language=&C#& %&&!DOCTYPEhtmlPUBLIC&-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&headid=&Head1&runat=&server&&&title&jQuery PlugIn - 表单验证插件实例 Validate &/title&&!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--&&linkrel=&stylesheet&type=&text/css&href=&&%=WebConfig.ResourceServer +&/JsLib/jquery/themes/redmond/style.css&%&&/&&scripttype=&text/javascript&src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/jquery-min-lastest.js&&&/script&
&script type=&text/javascript& src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/ui/jquery-ui-all-min-lastest.js&&&/script&
&script type=&text/javascript& src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js&&&/script&
&script type=&text/javascript& src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js&&&/script&
&% if (false)
{%&&script src=&~/js/jquery-vsdoc-lastest.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/&/script&
&style type=&text/css&&
/* form中显示文字的label */
display: -moz-inline-
line-height: 1.8;
display: inline-
text-align:
/* 出错样式 */
input.error, textarea.error
border: solid 1px #CD0A0A;
label.error
color:#CD0A0A;
margin-left:5
/* 深红色文字 */
color:#CD0A0A;
&/style& &/head& &body&
&form id=&commentForm& method=&get& action=&&&
&fieldset style=&width:500&&&legend&表单验证&/legend&
&p&&label for=&cname&class=&slabel&&&em class=&textred&&*&/em& 姓名:&/label&
&input id=&cname& name=&name& size=&25&class=&required& minlength=&2& /&
&p&&label for=&cemail&class=&slabel&&&em class=&textred&&*&/em& E-Mail:&/label&
&input id=&cemail& name=&email& size=&25&/&
&p&&label for=&curl&class=&slabel&&网址:&/label&
&input id=&curl& name=&url& size=&25&class=&url& value=&& /&
&p&&label for=&ccomment&class=&slabel&&&em class=&textred&&*&/em& 内容:&/label&
&textarea rows=&2& id=&ccomment& name=&comment& cols=&20&class=&required& style=&height:80&&&/textarea&
&p style=&text-align:&&
&input class=&submit& type=&submit& value=&提交& /&
&/fieldset&
&script type=&text/javascript&&
/*==========用户自定义方法==========*//*==========事件绑定==========*/
$(function()
/*==========加载时执行的语句==========*/
$(function()
$(&#commentForm&).validate(
errorClass: &error&,
submitHandler: function(form)
//如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
alert(&submitted!&);
//为name为email的控件添加两个验证方法:required()和email()
email: { required: true, email: true }
messages: {
//为name为email的控件的required()和email()验证方法设置验证失败的消息内容
email: {required:&需要输入电子邮箱&, email:&电子邮箱格式不正确&}
&/script&&/body&&/html&2. 实例讲解(1) 验证方法验证方法是验证某一个控件是否满足某些规则的方法, 返回一个boolean值. 比如email( )方法验证内容是否符合email格式, 符合则返回true. 下面是类库中email方法的源代码:// http://docs.jquery.com/Plugins/Validation/Methods/email
email: function(value, element) {
// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/returnthis.optional(element) || /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i.test(value);
},我们在:http://docs.jquery.com/Plugins/Validation中的 List of built-in Validation methods 一节中列出了所有内置的验证方法. 同时插件还提供了additional-methods.js 文件, 里面包含了更多的验证方法, 引入后既可启用.(2) 验证消息验证消息就是验证方法失败后显示的文字内容. 验证消息一定关联在某一个验证方法上, 并且全局的验证消息保存在jQuery.validator.messages 属性中.默认的validate类库自带英文验证消息:
messages: {
required: &This field is required.&,
});上面说明当required验证方法验证失败是, 显示&This field is required.&这条消息.在下载文件的localization文件夹中, 包含了各国语言的基本验证消息, 如同本实例一样引入不同的语言文件即可实现语言切换:&scripttype=&text/javascript&src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js&&&/script&语言文件的内容举例:jQuery.extend(jQuery.validator.messages, {
required: &必选字段&,
//... });现在必填项的问题提示就变成了中文.除了全局默认的验证消息, 也可以为某一个表单元素设置特有的验证消息, 比如本文实例中, 为email元素设置了特有的验证消息:
messages: {
//为name为email的控件的required()和email()验证方法设置验证失败的消息内容
email: {required:&需要输入电子邮箱&, email:&电子邮箱格式不正确&}options的messages属性可以针对某一个表单元素设置验证消息, 第一个email表示email元素, 值是一个集合, required就表示required验证函数, 第二个email表示是email验证函数.
(3)验证规则 验证规则就是这样的语意语句: 在元素A上, 使用 验证方法A 和 验证方法B 进行验证.验证规则将元素与验证方法关联起来, 因为验证方法同时也关联了验证消息, 所以元素与消息也关联了起来.为一个元素添加验证规则有多种方式.本实例的&姓名&元素使用了CSS样式规则和元素属性规则:&inputid=&cname&name=&name&size=&25&class=&required&minlength=&2&/&class元素属性设置元素的CSS样式类, 因为样式类中添加了required类, 所以会和required()验证函数关联. 这种规则叫做CSS样式规则.minlength元素属性也会自动和minlength()验证函数关联, 这种规则叫做元素属性规则.另外还可以通过编程的方式进行关联:
//为name为email的控件添加两个验证方法:required()和email()
email: { required: true, email: true }
},上面的语句表名为email表单对象添加了required()和email()验证函数.
(4) 表单提交默认情况下, 当验证函数失败时表单不会提交.但是可以通过添加class=&cancel&的方式让提交按钮跳过验证:&inputtype=&submit&class=&cancel&name=&cancel&value=&Cancel&/&当表单提交时, 会触发options中submitHandler属性设置的函数:
submitHandler: function(form)
//如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
alert(&submitted!&);
},此函数的签名同上. 我们可以在这个函数中, 编写在表单提交前需要处理的业务逻辑.需要注意当最后以编程的方式提交表单时, 一定不要使用jQuery对象的submit()方法, 因为此方法会触发表单验证,并且再次调用submitHandler设置的函数, 会导致递归调用.此函数的参数form就是表单对象, 用途就是不进行验证提交表单:form.submit()(5) DEBUG模式在开发阶段我们通常不希望表单被真正提交, 虽然可以通过本实例中重写submitHandler函数来实现, 但是还有更好的方式, 我们可以在submitHandler函数完成正式提交的逻辑, 然后通过设置options的debug属性, 来达到即使验证通过也不会提交表单的目的:$(&.selector&).validate({
debug: true })(6) 多表单验证有时会在一个页面上出现多个Form, 因为validate控件是针对form对象进行包装的, 所以我们可以控制哪些form对象需要验证.同时为了方便一次设置页面上所有的应用了validate控件的form对象, 提供了 jQuery.validator.setDefaults
函数让我们可以一次设置所有的默认值:jQuery.validator.setDefaults({
debug: true
});四.自动完成插件 autocompleteautocomplete插件能帮助我们实现类似于Google Suggest的效果:插件首页:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/插件文档:http://docs.jquery.com/Plugins/Autocomplete配置说明:http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions1.应用实例本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图:实例代码:&%@ Page Language=&C#& %&&!DOCTYPEhtmlPUBLIC&-//W3C//DTD XHTML 1.0 Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&headid=&Head1&runat=&server&&&title&jQuery PlugIn - 自动完成插件实例 AutoComplete &/title&&!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--&&linkrel=&stylesheet&type=&text/css&href=&&%=WebConfig.ResourceServer +&/JsLib/jquery/themes/redmond/style.css&%&&/&&linkrel=&stylesheet&type=&text/css&href=&&%=WebConfig.ResourceServer +&/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.css&%&&/&&scripttype=&text/javascript&src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/jquery-min-lastest.js&&&/script&
&script type=&text/javascript& src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/ui/jquery-ui-all-min-lastest.js&&&/script&
&script type=&text/javascript& src=&&% =WebConfig.ResourceServer %&/JsLib/jquery/plugin/jquery.autocomplete/jquery.autocomplete.min.js&&&/script&
&% if (false)
{%&&script src=&~/js/jquery-vsdoc-lastest.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/&/script&
&style type=&text/css&&
.formLabel{float: width: 150 text-align:}
.formInput{float:}
&/style& &/head& &body&
&!-- Demo. 应用AutoComplete插件 --&
&div class=&ui-widget ui-widget-content ui-corner-all& style=&width: 700 padding: 5&&
Demo. 应用AutoComplete插件 &/h3&
&br style=&clear: both& /&
&div class=&formLabel&&
&label for=&inputCityName&&请输入城市拼音和汉字:&/label&
&div class=&formInput&&
&input id=&inputCityName& name=&inputCityName& type=&text& /&
&br style=&clear:both& /&
&br style=&clear: both& /&
&div class=&formLabel&&
&label for=&inputCityName&&城市ID:&/label&&/div&
&div class=&formInput&&
&input id=&inputCityId& name=&inputCityId& type=&text& /&&/div&
&br style=&clear: both& /&
&br style=&clear: both& /&
&script type=&text/javascript&&
/*==========用户自定义方法==========*///城市数据var cityL
//autocomplete选项var options = {
minChars: 1,
width: 250,
matchContains: true,
formatItem: function(row, i, max)
return i + &/& + max + &: && + row.CityNameEn + && [& + row.CityName + &]&;
formatMatch: function(row, i, max)
return row.CityNameEn + & & + row.CityN
formatResult: function(row)
return row.CityN
//autocomplete初始化函数function initAutoComplete(data)
cityList =
$(&#inputCityName&).autocomplete(cityList, options);
$(&#inputCityName&).result(function(event, data, formatted)
$(&#inputCityId&).val(data.ElongCityId);
/*==========事件绑定==========*/
$(function()
/*==========加载时执行的语句==========*/
$(function()
//加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
$.getJSON(&cityinfo.htm&, null, initAutoComplete)
&/script&&/body&&/html&2. 实例讲解(1)准备数据源首先要准备实现自动建议的数据源. 本实例是通过发送Ajax请求获取JSON对象. autocomplete()方法支持两个参数, 第一个是data, 第二个是options.其中data参数可以使本实例中的一个数据变量, 也可以是一个url. 如果是url则会每次都调用Ajax请求获取数据.为了效率我倾向于在数据量允许的情况下, 在页面加载后使用Ajax获取全部的数据, 然后使用传递数据变量给autocomplete组件. 如实例中所示. 除非数据特别巨大无法再客户端加载, 则只能每次都使用发送Ajax请求从服务器端获取部分数据. 但是这会对服务器造成负担.(2) 设置关键函数虽然options是可选项, 但是对于我们的数据源cityList是一个多属性对象, 所以必须设置下面几个关键的配置项后才能够使用:formatItem对匹配的每一行数据使用此函数格式化, 返回值是显示给用户的数据内容.函数签名:function(row, rowNum, rowCount, searchItem)参数说明:row: 当前行. the results row, rowNum: 当前行号,从1开始.(注意不是索引,索引从0开始) the position of the row in the list of results (starting at 1),
rowCount: 总的行号 the number of items in the list of results
searchItem: 查询使用的数据, 即formatMatch函数返回的数据格式的内容. 我们在formatMatch函数中会设置程序内部搜索时使用的数据格式,这个格式和给用户展示的数据是不同的.
formatMatch对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 实例中用户看到的匹配结果是formatItem中设置的格式, 但是程序内部其实只搜索城市的英文和中文名称, 搜索数据在formatMatch中定义:return row.CityNameEn + & & + row.CityN函数签名:function(row, rowNum, rowCount,)参数说明同上formatResult此函数是用户选中后返回的数据格式. 比如实例中只返回城市名给input控件:return row.CityN函数签名:function(row, rowNum, rowCount,)参数说明同上(3) 为控件添加Result事件函数上面3个函数无法实现这类要求: 虽然只返回城市名称, 但是查询时使用城市ID, 选中一个城市后需要将城市ID存储在一个隐藏域中.所以autocomplete控件提供了result事件函数, 此事件会在用户选中某一项后触发:
$(&#inputCityName&).result(function(event, data, formatted)
$(&#inputCityId&).val(data.ElongCityId);
}); 函数签名:function(event, data, formatted)
参数列表:Result事件会为绑定的事件处理函数传递三个参数:event: 事件对象. event.type为result.data: 选中的数据行.formatted: 虽然官方的解释应该是formatResult函数返回的值, 但是实验结果是formatMatch返回的值. 在本实例为: &Beijing 北京&.(4) 匹配中文当前版本的autocomplete控件对中文搜索存在Bug, 原因是其搜索事件绑定在keydown事件上, 当使用中文输入法输入&北&字时没有任何提示. 我对原库做了修改, 将keydown事件修改为keyup事件, 即可完成对中文的智能提示搜索. 另外主要需要将&matchContains&配置项设置为&true&, 因为我们的搜索格式是&Beijing 北京&, 默认只匹配开头的字符.
(5) 更多配置项关于更多的配置项, 请参考官方文档:http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions(6) 更多事件除了上面介绍的autocomplete()和result()函数, 还有如下函数:search( ) : 激活search事件flushCache( ) : 清空缓存setOptions( options ) : 设置配置项五.总结本文详细介绍了表单验证插件和自动完成插件, 目前大家可以搜索到很多的插件应用, 或者上千的插件列表, 但是却找不到详细的使用文档. 插件用起来简单但是真正的灵活应用却不容易, 除了要翻越英文文档学习基本的使用, 还要花很长时间了解各个参数的作用, 如何配合使用等. 并且在上面做二次开发的难度相对较大, 插件的核心代码多没有注释并且复杂, 要在其中寻找逻辑关系要花费很多时间和精力. 本文介绍的两个插件更多的细节请参考官方文档, 地址都在一开始为大家提供了.后续文章我决定先进行jQuery技巧和javascript必备知识的讲解, 我们很少开发自定义插件所以将开发插件篇放在最后.本章节代码下载:http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-11.rar作者：张子秋出处：http://www.cnblogs.com/zhangziqiu/本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 &
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从 ...
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集
jQuery框架学习第四天:使用jQuery操作元素的属性与样式 jQuery框架学习第五天:事件与事件对象 jQuery框架学习第六天:jQuery中的Ajax应用 jQuery框架学习第七天: ...
转载于:http://www.cnblogs.com/qiantuwuliang/archive//1537213.html 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自 ...
这篇文章主要介绍了jquery实现简单的表单验证,思路大概是先为每一个required添加必填的标记,用each方法来实现,感兴趣的小伙伴们可以参考一下 jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路. 大概思路:先为每一个required添加必填的标记,用each()方法来实现.在each()方法中先是创建一个元素,然后通过append( ...
这篇文章主要介绍了通过jquery实现在页面加载的时自动为日期插件添加当前日期,需要的朋友可以参考下在页面加载的时候自动为日期插件添加当前日期. &script type=&text/javascript&& $(document).ready(function(){ $(&#startTime&).val ...轻松一扫，精彩不停
扫描下载APP
正在学习：
感谢你的评价，我们会继续努力！
恭喜，你已学完本节课程！
感谢你的评价，我们会继续努力！
写点什么吧，你的感受对其他同学有很大帮助噢
字数限250字以内
DW+ASP+Access快速开发留言板
易语言快速入门
PHPExcel快速入门之thinkphp5.0 员工业绩报表实战-php操作excel
购买后可以学习整个课程
&课程信息&
课程价格：29.80元
购买人数：69人
学生满意度：100%
直播倒计时：09小时52分15秒
上课时间：
线下课倒计时：09小时52分15秒
扫码下载APP
模特资料列表与详情页展示
套餐价: ￥53.64
省: ￥5.96
原总价：59.60
套餐价: ￥46.42
省: ￥5.16
原总价：51.58
php爱好者入门与进阶
用thinkphp5快速开发企业网站，您将会学习掌握企业网站开发的整个过程！
主要培训网站的前后端开发与制作以及桌面类编程语言等，辅导学员制作出精美实用的作品。
PHP交流群：
企业网站发开实战之ThinkPHP5.0
在看云中有同步的文档，文档地址：https://www.kancloud.cn/jingyifeng/thinkphp
文档对于视频学院是免费的，如果您已经购买了，请私聊我办理文档费用退款！
PHP交流群：
一些资料可以到群共享中进行下载，有什么问题或者疑问，可以到交流群中进行提问。
本套课程将全面讲解企业网站开发的全部过程。
课程内容摘要： 双语网站，管理员模块，内容管理模块，banner管理模块，文件管理模块，微信机器人模块，会员模块，评论模块，双语版网站
课程知识点摘要：无限级分类，信息置顶（原理），文件管理模块，微信公众号简单开发
网站预览（双语网站）：
2、摄影作品
3、新闻列表
第1章课程介绍-php交流群： 课件资料下载
可试听整节
第2章前期准备
windows下php集成开发环境的搭建
开发工具PHPstorm的安装和配置
Composer工具的安装
git工具的安装
可试听整节
第3章双语版企业网站开发实战-前期工作
本地服务器环境配置
phpstorm+composer创建项目
Composer创建项目（CMD）
课程源码同步
ThinkPHP5.0 模块的创建与访问（一）
ThinkPHP5.0 模块的创建与访问（二）
ThinkPHP5.0入口文件的隐藏
实战-创建数据库并配置数据库连接
第6章双语版企业网站开发实战-后台模块开发（更新中...）
实战-后台模块的创建
实战-管理员表的创建
实战-后台模板的引入
实战-管理员添加界面的搭建
实战-前端数据验证
实战-数据的提交与接收
实战-数据的后端验证
实战-数据写入数据库
实战-管理员列表的实现
实战-数据分页及自定义分页样式
实战-管理员编辑界面的搭建
实战-管理员编辑功能的实现
实战-管理员的删除
实战-管理员登录界面及验证码的载入
ThinkPHP中验证码常见问题处理
实战-管理员登面表单处理及数据提交
实战-管理员登录功能的实现
实战-管理员登录-后台安全与优化
实战-服务器信息的获取
实战-管理员登录日志
实战-管理员密码修改（一）
实战-管理员密码修改（二）
实战-管理员添加遗留问题
实战-网站配置（模板处理）
实战-网站配置（表的创建及数据更新）
实战-网站配置信息的显示
实战-网站配置新增logo上传功能（一）
实战-网站配置logo上传(二)
实战-网站配置补充(问题处理)
实战-栏目管理（无限级分类原理）
实战-栏目管理（创建数据表和模型）
实战-栏目管理（栏目添加界面的载入）
实战-栏目管理（无限级分类的添加（一））
实战-栏目管理（无限级分类的添加（二））
实战-栏目管理（无限级分类详解）重点
实战-栏目管理（无限级分类的优化重点）
实战-栏目管理（无限级分类知识扩展）
实战-栏目管理（栏目列表）
实战-栏目管理（栏目排序）
实战-栏目管理（栏目编辑）
实战-栏目管理（无限级分类编辑优化）重点
实战-栏目管理（栏目删除）
实战-栏目管理（栏目扩展）
实战-栏目管理（百度编辑器的引入）
实战-栏目管理（栏目扩展写入数据库）
实战-栏目管理（栏目图片上传（一））
实战-栏目管理（栏目图片上传（二））
实战-栏目管理（栏目图片上传（三））
实战-栏目多图上传处理
实战-栏目图片的删除
栏目图片删除纠错（补充）
实战-栏目类型扩展
实战-栏目扩展编辑（一）
实战-栏目扩展编辑（二）
实战-栏目删除功能的完善
实战-栏目伸缩详解
实战-内容管理（数据表和模型的创建）
实战-内容管理（创建控制器并加载添加模板）
实战-内容管理（完善添加模板）
实战-内容管理（提交表单实现内容添加）
实战-问题处理
实战-内容管理（自定义验证规则）
实战-表单安全（表单令牌详解）
实战-内容图片上传（一）
实战-内容图片上传（二）
实战-完善内容添加模型事件的使用
实战-内容列表显示和关联查询
实战-内容列表显示字段扩展
实战-内容异步置顶功能
实战-内容图片管理（一）
实战-内容图片管理（二）
实战-内容图片管理（三）图片异步排序
实战-内容列表图片扩展（有无图片及图片张数显示）
实战-单条文章删除（含对应图片）
实战-批量删除(全选与取消)
实战-内容列表批量删除
实战-内容列表（栏目筛选）
实战-内容编辑（一）
实战-内容编辑（二）
实战-内容编辑（三）
实战-轮播图管理（一）
实战-轮播图管理（二）
实战-轮播图管理（三）
实战-轮播图管理（四）
实战-轮播图管理（五）
实战-文件管理（一）文件管理介绍
实战-文件管理（二）文件和目录的浏览
实战-文件管理（三）子目录浏览和权限设置
实战-文件管理（四）文件大小的人性化显示
实战-文件管理（五）文件目录的排序
实战-文件管理（六）中文乱码的处理
实战-文件管理（七）文件类型图标的显示
实战-文件管理（八）文件列表分页
实战-文件管理（九）文件和目录的删除
实战-文件管理（十）文件和目录的重命名
实战-文件编辑（1）编辑功能的实现
实战-文件编辑（2）可编辑文件类型限制
实战-文件编辑（3）codemirror介绍
实战-文件编辑（4）扩展
实战-文件管理（十一）文件下载
实战-文件管理（十二）图像预览
第7章双语版企业网站开发实战-前台模块开发
静态资源文件和首页的引入
导航菜单（一）
导航菜单（二）导航栏目的读取与显示
前台模板文件的引入
根据前台需求扩展后台功能
后台功能扩展补充
导航菜单（三）URL地址的生成
导航菜单（四）当前栏目高亮
关站提示及网站配置信息的获取
网站配置信息和首页轮播图的调用
首页关于我们的数据调用及优化
首页摄影作品的数据调用
首页合作伙伴数据的调用及栏目的功能扩展
单页数据调用
专业团队数据的调用
完善前台分页显示
专业团队详情页
当前位置的实现
摄影作品列表与详情页展示
模特资料列表与详情页展示
摄景场景列表与详情页展示
新闻资讯列表与详情页展示
浏览（点击）次数扩展（一）防刷新
浏览（点击）次数扩展（二）防刷新（IP和时间限制）
联系我们页面处理
内页banner的调取
第8章URL地址的优化
入口文件隐藏
路由器注册
前台URL地址优化
404页面处理
第9章网站部署上线
windows虚拟主机环境部署（一）
windows虚拟主机环境部署（二）
Linux服务器部署（一）
Linux服务器部署（二）
第10章双语版企业网站开发实战-双语版网站
多语言的实现原理
第11章微信机器人开发
课程暂无资料
158*****401
字数限400字符内
该机构的同类课程
该机构的热门课程
494 人已学
208 人已学
141 人已学}