1， 客户端 用Javascript进行验证，直接提示用户输入的数据是否符合规范，是否合法。

　　这样体验行比较好，客户端立即就可以得到反馈，而且减少了服务器端的数据交互。

　　这样前端数据验证并不是很安全，如果客户端直接拼接QueryString字符串去请求服务器，就有可能执行一些非法动作。

　　例如： http://localhost:40201/qukuan.ashx?deleteid=2    客户端可以根据这个请求去修改 deleteid 的值，非法删除其他数据。

　　Ajax.Demo 中添加新页面取款金额判断的验证：QuKuan.html QuKuan.ashx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        function Check() {

            var QuKunJine = document.getElementById('amount').value;

            if (parseInt(QuKunJine, ) > ) {

                alert('单笔取款金额不能大于2000');

                return false;

            }

        }

    </script>

</head>

<body>

    <!--<form action="QuKuan.ashx" method="post" onsubmit="return confirm('真的提交吗？')">-->

    <!--<form action="QuKuan.ashx" method="post" onsubmit="var QuKunJine = document.getElementById('amount').value; if (parseInt(QuKunJine, 10) > 2000) {alert('单笔取款金额不能大于3000'); return false;}" >-->

    <form action="QuKuan.ashx" method="get" onsubmit="Check()">

        <input type="hidden" name="IsPostBack" value="true" />

        请输入取款金额：

        <input type="text" name="JinE" id="amount" />

        <br />

        <input type="submit" value="确认取款" />

    </form>

</body>

</html>
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace AjaxDemo

{

    /// <summary>

    /// QuKuan 的摘要说明

    /// </summary>

    public class QuKuan : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/html";

            if (string.IsNullOrEmpty(context.Request.QueryString["IsPostBack"]))

            {

                //页面首次加载

                string strHtml = Common_Nvelocity.RenderHTML("QuKuan.html", null);

                context.Response.Write(strHtml);

            }

            else

            {

                string strJinE = context.Request.QueryString["JinE"];

                if (Convert.ToInt16(strJinE) > )

                {

                    context.Response.Write("取款失败，单笔最多取款2000元");

                }

                //To Do ------

                else

                {

                    context.Response.Write("取款成功，您的巨款金额为" + strJinE + "元");

                }

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

2， 服务器端同样需要加入数据判断、验证 以保证数据录入的正确性。

3，ASP.NET 4.0 之后对ashx请求检测中默认对请求进行了检查、校验 。

　　如果请求数据中有一些 <，>等潜在的XSS(跨站脚本，Cross Site Scripting) 攻击字符，则会报错。

　　我们在之前的留言板项目LiuYanban中提交HTML留言，<font color='red'> HTML红色字体</font> 系统会提示如下错误：

　　

　　如果允许客户端可以提交HTML代码可以修改Webconfig，<system.web>节点加入 <httpRuntime requestValidationMode="2.0"/> 把验证模式变为2.0 

　　（.aspx页面顶部的Page还要加入VilidateRequest="fasle"）。添加留言后，即可显示：

　　

4，允许网站留言功能中添加代码的功能开放，用户就可以添加js,css等代码。

　　下面这个例子，留言中添加JS代码提示中奖，这样其他用户在打开留言板的时候页面也会弹出中奖提醒信息

　　

5，CKEditor 是第三方的Javascript工具，是可以进行可视化的HTML编辑器。

　　CkEditor使用方法：A,官网下载后，把CKEditor包放入项目中

　　

　　B, HTML页面中添加对 ckeditor.js 的引用　

 <script src="../ckeditor/ckeditor.js"></script>

　　C, HTML页面底部添加js代码，用CKEDDITOR.replace() 实现把 textarea替换为 CKEditor　　

<script type="text/javascript">

    var MesTextArea = document.getElementById("MsgContent");

    CKEDITOR.replace(MesTextArea);

</script>

　　D, 效果如下：

　　

6，CKEditor，通过Javascript创建了可视化编辑器，定义每个按钮执行的动作，例如：加粗 B ，就添加了 <strong></strong>代码

　  我们先看一个javascript动态生成HTML标签的一个小例子：　

<ul id="CreateLi">

</ul>

<script type="text/javascript">

    //ul 下生成 li

    var ul1 = document.getElementById("CreateLi");

    var li1 = document.createElement("li");

    li1.innerHTML = "动态创建的li节点";

    ul1.appendChild(li1);

</script>

　　F12查看Element可以看到，生成了 <li> 标签

　　

7， CKEditor的原理和上面动态生成<li>标签类似。 我们继续查看CKEditor对应的Element元素，发现原来位置的TextArea被隐藏并且在其下方添加了一段<DIV>代码

　　也正是这一款代码，调用CKEditor中的css 以及 js 实现了 所见即所得编辑器的功能

 总结： 1，本文简单介绍了数据验证机制：前端js判断给用户良好的体验，后天逻辑判断数据保证数据的合法性；

　　　  2，CKEditor是第三方的可视化编辑工具，原理就是借助js,css画出编辑框并实现每个按钮的功能。

本文参考网站：http://ckeditor.com/

完整Demo下载：LiuYanban_CKEditor

【ASP.NET基础】客户端、服务器端的数据验证 + CKEditer的更多相关文章

  1. Silverlight实例教程 - Validation服务器端异步数据验证（转载）

    摘要:本 篇实例,我们仍旧使用SilverlightValidationDemo项目,为了不和过去的验证方法冲突,这里我们创建一个新的数据成员类 Staff,该类实现INotifyDataErrorI ...

  2. ASP.NET MVC3 入门指南之数据验证[源码RAR下载]

    http://www.cnblogs.com/BingoLee/archive/2011/12/23/2298822.html 前言: 无论你编写什么样的网页程序,都需要对用户的数据进行验证,以确数据 ...

  3. 【ASP.NET MVC系列】数据验证和注解

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  4. Silverlight实例教程 - Validation客户端同步数据验证（转载）

    摘要:在Silverlight 4中,Silverlight Validation有相对的改进,本篇将介绍Silverlight 4中新加入的验证机制功能,IDataErrorInfo客户端同步验证机 ...

  5. Silverlight实例教程 - Validation数据验证基础属性和事件（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  6. kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件

    小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...

  7. Silverlight实例教程 - Validation数据验证开篇

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  8. Silverlight实例教程 – Datagrid,Dataform数据验证和ValidationSummary（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  9. Silverlight实例教程 - Validation用户提交数据验证捕获（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

随机推荐

  1. HTML5、CSS3各浏览器兼容性

    推荐一个网站 [点这里] 在这个网站中可以给你所有Web特性在各个不同浏览器以及相同浏览器的不同版本的兼容性. 还可以显示使用各个版本的浏览器的使用比例. 首页中显示所有的H5.CSS3等特性.点进去 ...

  2. linux 压缩与解压缩

    tar 命令详解 　-c: 建立压缩档案 　　-x：解压 　　-t：查看内容 　　-r：向压缩归档文件末尾追加文件 　　-u：更新原压缩包中的文件 　　这五个是独立的命令，压缩解压都要用到其中一个，可 ...

  3. [MySQL复制异常]'Cannot execute statement: impossible to write to binary log since statement is in row format and BINLOG_FORMAT = STATEMENT.'

    MySQL复制错误]Last_Errno: 1666 Last_Error: Error executing row event: 'Cannot execute statement: imposs ...

  4. script的defer和async

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  5. [MFC]MFC中OnDraw与OnPaint的区别

    问题 问题:我在视图画的图象或者文字,当窗口改变后为什么不见了?OnDraw()和OnPaint()两个都是解决上面的问题,有什么不同? OnDraw()和OnPaint()好象兄弟俩,因为它们的工作 ...

  6. [Angular 2] Set Properties on Dynamically Created Angular 2 Components

    When you generate Angular 2 components, you’re still able to access the component instance to set pr ...

  7. C预处理器

    C预处理器 目录 概述 文件包含 宏替换 条件包含 概述 预处理器是编译过程中单独执行的第一个步骤 文件包含 #include "文件名" / #include <文件名&g ...

  8. java实现迷宫算法--转

    沿着所有方向进行探测,有路径则走,没有路径则从栈中回退. 回溯法是一种不断试探且及时纠正错误的搜索方法,下面的求解过程采用回溯法.从入口出发,按某一方向向前探索,若能走通(未走过的),即某处可以到达, ...

  9. 用Python编写九九乘法表考虑print自动换行问题

    编写了一个简单的小程序九九乘法表,代码如下: for i in range(1,10): for j in range(1,i+1): print(" %d*%d=%d" % (j ...

  10. 创建ORACLE JOB

    oracle job简介 主要的使用情景 定时在后台执行相关操作:如每天晚上0点将一张表的数据保存到另一张表中,2:定时备份数据库等 熟化说万事开头难,这里我只简单记述一个创建一个简单的job 步骤如 ...