【ASP.NET基礎】客戶端、服務器端的數據驗證 + CKEditer

時間 2019-11-18

標籤 ASP.NET基礎客戶端服務器端的數據驗證 ckediter 欄目 ASP 简体版

原文原文鏈接

1，客戶端用Javascript進行驗證，直接提示用戶輸入的數據是否符合規範，是否合法。javascript

　　這樣體驗行比較好，客戶端當即就能夠獲得反饋，並且減小了服務器端的數據交互。css

　　這樣前端數據驗證並非很安全，若是客戶端直接拼接QueryString字符串去請求服務器，就有可能執行一些非法動做。html

　　例如： http://localhost:40201/qukuan.ashx?deleteid=2 客戶端能夠根據這個請求去修改 deleteid 的值，非法刪除其餘數據。前端

　　Ajax.Demo 中添加新頁面取款金額判斷的驗證：QuKuan.html QuKuan.ashxjava

<!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, 10) > 2000) {
                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>

View Code

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) > 2000)
                {
                    context.Response.Write("取款失敗，單筆最多取款2000元");
                }
                //To Do ------
                else
                {
                    context.Response.Write("取款成功，您的鉅款金額爲" + strJinE + "元");
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

View Code

2，服務器端一樣須要加入數據判斷、驗證以保證數據錄入的正確性。web

3，ASP.NET 4.0 以後對ashx請求檢測中默認對請求進行了檢查、校驗 。安全

　　若是請求數據中有一些 <，>等潛在的XSS(跨站腳本，Cross Site Scripting) 攻擊字符，則會報錯。服務器

　　咱們在以前的留言板項目LiuYanban中提交HTML留言，<font color='red'> HTML紅色字體</font> 系統會提示以下錯誤：app

　　若是容許客戶端能夠提交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>