input中禁止輸入特殊字元

阿新 • • 發佈：2019-02-07

當我們在文字框中輸入一些特殊符號時，有些特殊字元傳入到後臺是會產生錯誤的，所以我們應該從根本上解決問題。

例圖：

當文字框中輸入的文字含有特殊符號，就會彈出警示框

原始碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script  
type="text/javascript">

        $(document).ready(function(){

            $("button").click(function(){
//                var regExp = /,/;
var text = $("input").val();
                var pattern = new RegExp("[`[email protected]#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]" 
);
                var result = text.match(pattern);
                if (!result)
                {
                    $("#content").append(text+"<br>");
                    $("input").val("");
                }else{

                    alert("含有特殊字元")
                }
            });
        });
    </ 
script>
</head>
<body>
    <div style="width: 400px;width: 400px;margin: auto">
        <h3>公告牆</h3>
        <div style="width: 300px;height: 300px;border: 1px solid #b3d4fc" id="content"></div>
        <div style="margin-left: 50px;margin-top: 10px">輸入框：<input type="text"></div>
        <div style="width:100px;;margin: auto;margin-top: 10px">
            <button>釋出</button>
        </div>
    </div>
</body>
</html>

在這個例子的基礎上我們再進行一些操作

例圖：

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>Note Book</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            height: 24px;
            line-height: 24px;
            list-style: none;
        }

        main {
            position: relative;
            width: 512px;
            margin: 0 auto;
        }

        div {
            height: 48px;
            line-height: 48px;
        }

        section {
            width: 512px;
        }

        .ipt {
            width: 388px;
            margin: 0 auto;
        }

        .ipt input {
            width: 320px;
            height: 24px;
        }

        .btn {
            width: 80px;
            margin: 0 auto;
        }

        button {
            width: 80px;
            height: 24px;
        }

        .note_list {
            width: 512px;
            height: 384px;
            border: 2px solid #999;
            padding: 12px;
        }

        #toast {
            position: absolute;
            top: 256px;
            left: 128px;
            width: 160px;
            height: 148px;
            background-color: #fff;
            border: 1px solid #999;
        }

        #toast h3 {
            text-align: center;
        }

        #toast h5 {
            text-align: center;
        }

        #toast button {
            display: block;
            margin: 16px auto;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.constant("tips", {
            add_note_empty: ["請輸入記錄內容", "好吧"],
            add_note_exists: ["您記錄的內容已經存在", "好吧"],
            search_empty: ["請輸入搜尋內容", "好吧"],
            search_success: ["搜到相關內容", "很好"],
            search_failure: ["未搜到相關內容", "失望"]
        });

        app.controller("myCtrl", function ($scope, tips) {
            var tipsShow = function (tips) {
                $scope.tips_message = tips[0];
                $scope.tips_btn = tips[1];
                $scope.tips_is_show = true;
                console.log($scope.tips_message);
                console.log($scope.tips_btn);
                console.log($scope.tips_is_show);
            };

            var tipsHide = function () {
                $scope.tips_is_show = false;
            };

            $scope.noteList = []; // 儲存賬本所有記錄。
$scope.addNote = function () {
                if ($scope.note == undefined) {
                    tipsShow(tips.add_note_empty);
                    return;
                }

                var note = $scope.note.trim();

                if (note.length == 0) {
                    tipsShow(tips.add_note_empty);
                    return;
                }

                if ($scope.noteList.indexOf($scope.note) >= 0) {
                    tipsShow(tips.add_note_exists);
                    $scope.note = "";
                    return;
                }

                $scope.noteList.push($scope.note);
                $scope.note = "";
            };

            $scope.search = function () {
                if ($scope.keyword == undefined || $scope.keyword.length == 0) {
                    tipsShow(tips.search_empty);
                    return;
                }
                if ($scope.noteList.indexOf($scope.keyword) >= 0) {
                    tipsShow(tips.search_success);
                } else {
                    tipsShow(tips.search_failure);
                }
                $scope.keyword = "";
            };

            $scope.tipsHide = function () {
                tipsHide();
            }
        });
    </script>
</head>
<body ng-app="myApp">
<main ng-controller="myCtrl">

    <div>記賬本</div>

    <div class="note_list">
        <ul>
            <li ng-repeat="value in noteList">{{ value }}</li>
        </ul>
    </div>

    <section>
        <div class="ipt">輸入框：<input type="text" size="48" ng-model="note"/></div>
    </section>

    <section>
        <div class="btn">
            <button ng-click="addNote()">記錄</button>
        </div>
    </section>

    <section>
        <div class="ipt">搜尋框：<input type="text" size="48" ng-model="keyword"/></div>
    </section>

    <section>
        <div class="btn">
            <button ng-click="search()">搜尋</button>
        </div>
    </section>

    <div id="toast" ng-if="tips_is_show">
        <h3>提示</h3>
        <h5>{{ tips_message }}</h5>
        <button ng-click="tipsHide()">{{ tips_btn }}</button>
    </div>
</main>
</body>
</html>

input中禁止輸入特殊字元

當我們在文字框中輸入一些特殊符號時，有些特殊字元傳入到後臺是會產生錯誤的，所以我們應該從根本上解決問題。例圖：當文字框中輸入的文字含有特殊符號，就會彈出警示框原始碼： <!DOCTYPE html> <html> <head lang

文字框中禁止輸入特殊字元實現方法

方法一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l

安卓輸入框禁止輸入特殊字元的需求

滿足輸入框禁止輸入特殊字元的需求！！！在真正的專案中輸入框的非法字元需求是必不可少的，所以本文對這個需求編寫了一些詳細邏輯程式碼，首先說一下非法字元比如空格，逗號分號這些字元都屬於特殊字元，在我們的安卓專案中，如果有輸入框，是不可能接收自卸特殊字元，用來作為接受

JS控制文字框禁止輸入特殊字元

JS 控制不能輸入特殊字元<input type="text" class="domain" onkeyup="this.value=this.value.replace(/[^u4e00-u9

jquery 判斷input框中不能輸入特殊字元（#￥%……&*@）

html: <textarea id="markcontent" class="input2style textarec" name="content" rows="2" cols="56" o

禁止EditText輸入特殊字元

/** * 禁止EditText輸入特殊字元 * @param editText */ public static void setEditTextInhibitInputSpeChat(EditText editText){ InputFil

ionic中input框禁止輸入問題

其實這個問題在之後瀝青思路之後覺得還是挺好實現的,沒有思路的時候真是找不到頭緒~ 功能的描述為：當輸入框中沒有內容時，允許使用者編輯；當其中有內容時不允許使用者編輯，只有當用戶點選編輯按鈕後，才可

js中獲取input中所輸入的值

-c scrip tle utf-8 element 輸入 pla ont button <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

vim 輸入特殊字元

在VIM中可以通過二合字元和十進位制進行輸入，在輸入模式中，Ctrl + V, 十進位制在輸入模式中，Ctrl + K, 二合字元（區分大小寫）注意:特殊字元也算一個位元組通過用的^@是為了保證結尾沒有其他控制字元，比如\n :h digraph-tablecha

edittext 禁止輸入非法字元和空格，用到輸入過濾器InputFilter

一般在我們初始化的時候，給需要限制的edittext直接設定 //禁止輸入空格 setEditTextInhibitInputSpeChat(et_nickname); //禁止輸入空格 private void setEditTextInhibitInputSpeChat

對字串中是否包含特殊字元，是否是空格或換行，以及字數的限制（漢字和字母）

// 空格換行 -(BOOL)isEmpty:(NSString* )string{ if (!string) { return true; } else{ NSCharacterSet* chara =[NSCharacte

iOS網址識別url中包含有特殊字元時需要轉義

url = [NSString stringWithFormat:@"http://%@",self.selectedStr]; NSString *encodedString = (NSString *)CFBridgingRelease(CFURLCreateSt

iOS巔峰之限制輸入特殊字元

//在需要的地方呼叫該方法 -(void)submit { NSString * intriduction = self.textField.text; for (NSInteger i = 0; i < self.specialStringArray.count; i

java對URL中含有的特殊字元"&"的處理

1、問題描述：最近在做java匯出檔案到excel專案中遇到請求的URL包含引數&的時候，匯出的檔案裡面內容為空，什麼都沒有。 2、問題排查：首先我檢視專案執行的日誌，發現打印出來的錯誤資訊是空指標異常java.lang.NullPointException.然後發

ajax請求中傳遞的引數中如果含有特殊字元怎麼處理？

在JQUERY AJAX開發中遇到了下面的一個問題，在執行AJAX請求的時候，需要傳遞一個“50%”的引數，而這個引數中含有特殊字元%。這樣的話就會出現問題了，我們知道伺服器在傳送請求的時候，會將url中的引數轉化成類似於“%2C%2F%3F%3A%40%26%

@PathVariable 中包含.等特殊字元異常

spring MVC從3.0開始支援REST，而主要就是通過@PathVariable來處理請求引數和路徑的對映。由於考慮到SEO的緣故，很多人喜歡把新聞的名稱作為路徑中的一部分去處理，這時候中文的名稱就會遇到問題，沒辦法對映，這個是因為編碼問題，只要到 T

tomcat8 中 get請求特殊字元過濾

請求中包含特殊字元 [] | {} 傳送get請求失敗：原因：這是因為Tomcat嚴格按照 RFC 3986規範進行訪問解析，而 RFC 3986規範定義了Url中只允許包含英文字母（a-zA-Z）、數字（0-9）、-_.~4個特殊字元以及所有保留字元(RFC3986中指定了以下字元為保留字元：!

URL中編碼URL特殊字元

一、問題的由來　　問題：當url地址中包含&、+、%等特殊字元（主要是傳遞引數時，引數的內容中包含這些字元）時，地址無效。比如http://10.190.0.0:108/doc/test+desc2.bmp，若檔名中出現+/&等特殊字元，後臺會報404的錯誤，即web伺服器找不到頁面或者資源

Android URL中關於中文特殊字元的編碼

http://fengchj.com/?p=1940 還有一個文章“陳年老坑之 URL Encoding”也是這方面的文章：https://blog.jamespan.me/2015/05/17/url-encoding URL中的空格有時候被編碼成%20，有時候被

iOS：使用NSRegularExpression正則去掉一串字串中所有的特殊字元和標點

/* 遍歷的模式，正則表示式匹配在指定options和range模式下匹配指定string，傳入block中可以獲取結果資訊 */ - (void)enumerateMatchesInString:(NSString *)string options:(NSMatchingOptions)options

input中禁止輸入特殊字元

相關推薦