2013.6.13针对Jquery的笔记

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wxd-1990/archive/2013/06/13/3134362.html

文章标签：

#javascript #测试 #前端 #ViewUI

本文分享了在MVC项目中进行前端优化的经验，包括改进注册验证流程、处理后端编辑器生成的内容以及实现页面元素的动态显示与隐藏。

　　今天回到公司，开始修改之前项目遗留下来的东西。前端架构为MVC,之前并没有接触过，我知道这是个机会，以此为动力，开始了一天的工作。

　　一天下来，任务列表少了几项。收获也不少，在此整理一下。

任务1：　　修改之前的注册验证。

　　　　　　　　原始状况。之前用到MVC内置的验证。

　　　　　　　　　　　　　生成控件使用： @Html.PasswordFor(m => m.Password, new { Class = "textbox" })

　　　　　　　　　　　　　　　　　　　　 @Html.LabelFor(m => m.Password)

　　　　　　　　　　　　　验证使用：　　@Html.ValidationMessageFor(m => m.Password)

　　　　　　　　使用这种方法，只能在提交时触发验证事件，这样用户体验较差。所以今天我把验证方法去掉，用了Jquery去实现动态的验证。

　　　　　　　现状：

　　　　　　　　　　　　提示信息样式：

　　　　　　　　　　　　.remind{color:#999;margin-left:5px;}

　　　　　　　　　　　　.err{color:Red;margin-left:5px;}

　　　　　　　　　　　　.right{color:Green;margin-left:5px;}

　　　　　　　　　　　　验证后，对结果的提示，通过样式的改变，更加醒目。

　　　　　　　　　　　　JQ部分代码：

　　　　　　　　　　　　/*手机号验证*/

　　　　　　　　　　　　（失去焦点事件为blur(),获取焦点为focus(),focus括号内有function则在获取到焦点时执行代码，没有时，则表示获取焦点）
　　　　　　　　　　　　　　$("#UserName").blur(function (e) {
　　　　　　　　　　　　　　var Num = $("#UserName").val();
　　　　　　　　　　　　　　if (!isMobilePhone(Num)) {
　　　　　　　　　　　　　　$("#UserNameRemind").html("请输入正确手机号！").removeClass("remind").removeClass("right").addClass("err");
　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　else {
　　　　　　　　　　　　　　$("#UserNameRemind").html("手机号格式正确！").removeClass("err").removeClass("remind").addClass("right");
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}).focus(function () {
　　　　　　　　　　　　　　$("#UserNameRemind").html("用户名必须为用户手机号码！").removeClass("err").removeClass("right").addClass("remind");
　　　　　　　　　　　　　　}).focus();

　　　　　　　　　　　　　正则表达式验证：

　　　　　　　　　　　　　　function isMobilePhone(obj) {
　　　　　　　　　　　　　　var partten = /^(($\d{3}$)|(\d{3}\-))?13[0-9]\d{8}|15[0-9]\d{8}|18[0-9]\d{8}|14[0-9]\d{8}$/;

　　　　　　　　　　　　　　if (partten.test(obj)) {
　　　　　　　　　　　　　　return true;
　　　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　return false;
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}

　　　任务2：

　　　　　　页面中部分代码是通过后端编辑器写入，在mvc中，浏览时会把后台写入的html标签原封不动的展示出来。这时候就要用到mvc中的html.Raw()方法将html标签识别出来。

　　　任务3：页面上有大量的文字需要显示，内容分块儿显示，要求对没一块儿添加显示和隐藏功能。

　　　　　　对于大量的文章类信息显示，又分为多个块儿，这是就要用的层的显示和隐藏了。直接用Jq掉display效果不是很好，所以我就在网上找到一些写好的，能有动态效果的代码。

　　　　　　使用Jquery内置方法 toggle 对toggle（fn1，fn2），点击次数为奇数时执行 fn1,偶数时执行fn2.

　　　　　　奇数时：$("#hzDetial").hide('slow');

　　　　　　偶数时：$("#hzDetial").show('fast');

转载于:https://www.cnblogs.com/wxd-1990/archive/2013/06/13/3134362.html