堆棧內存溢出
  簡體   English   中英

如何驗證標簽管理器上的輸入

[英]How to validate input on Tag Manager

 原文  2020-01-17 18:18:10  7   1    javascript/ asp.net/ validation

問題描述

我正在使用標簽管理器從aspx網絡表單上的用戶那里獲取一些標簽。
現有的文檔很差，我無法完成我的工作。
這是用戶輸入電話號碼的界面，按下enter鍵或tab鍵（在tagmanager.js預定義）后，標簽會自動創建並以標簽樣式顯示數字：
在此處輸入圖片說明
我只能通過一些 javascript 編碼將用戶輸入限制為數字，但未能定義用戶只能以09\\d{9}$格式輸入值的標准。
但是，我為輸入放置了一個asp:RegularExpressionValidator ，但它僅適用於模糊或提交。
這是我嘗試的代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tagBuilder.aspx.cs" Inherits="Customers_Gym.User.tagBuilder" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Tag Builder Test</title>
    <link rel="stylesheet" href="css/assets/bootstrap.min.css">
    <link rel="stylesheet" href="css/assets/bootstrap-extend.css">
    <link href="css/tagmanager.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <br />
                    <input id="txtTag" type="text" runat="server" name="tagsk" 
                        placeholder="Phone Numbers" class="input-medium tm-input tm-input-success tm-input-typeahead form-control" 
                        maxlength="11" onkeypress="return IsNumeric(event);">
                    <asp:RegularExpressionValidator CssClass="redError" ID="regval3"
                        runat="server" ErrorMessage="Incorrect intput"
                        ValidationExpression="09\d{9}$"
                        ControlToValidate="txtTag"></asp:RegularExpressionValidator>
                    <input id="btn" type="submit" class="btn btn-success btn-block" runat="server" value="click to submit form" onserverclick="btn_ServerClick" />
                </div>
            </div>
        </div>
    </form>
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="../Scripts/WebForms/WebUIValidation.js"></script>
    <script src="js/tagmanager.js"></script>
    <script src="../Scripts/typeahead.bundle.js"></script>
    <script>

        var tagApi = jQuery(".tm-input.tm-input-typeahead").tagsManager({
            prefilled: [<%=test%>],
            hiddenTagListName: 'hiddenTagAhil',
            validator: null
        });
        jQuery(".tm-input.tm-input-typeahead").typeahead(null, {
            name: 'countries',
            displayKey: 'name',
            source: countries.ttAdapter()
        }).on('typeahead:selected', function (e, d) {
            tagApi.tagsManager("pushTag", d.name);
        });
    </script>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            return ret;
        }
    </script>
</body>
</html>


在標簽管理器文檔中，有一個屬性名稱validator: null ，唯一的解釋是：

驗證器一個可選的回調函數，用於驗證用戶輸入。 將標簽字符串作為輸入，並且必須返回 true 或 false。 默認值：null（未使用驗證函數）。


沒有任何示例，所以我無法找到如何為標簽管理器輸入添加正則表達式或標准。

1 個解決方案

解決方案1
 0 已采納  2020-01-18 11:37:59

經過一段時間的嘗試和錯誤后，我可以使用從Tag Manager Events和Tag Manager API Methods獲取幫助。 有一些事件，您可以找出現在觸發的事件以及您想什么時候做某事。
我首先嘗試tm:pushed event [when a new tag is pushed]，以提醒是否通過此代碼添加了標簽：

jQuery(".tm-input").on('tm:pushed', function(e, tag) {
  alert(tag + " was pushed!");
});

然后我嘗試將驗證器函數添加到有效的輸入標簽：

<script type="text/javascript">
    function phoneNumber(d) {
       var pattern = /09\d{9}$/;
       if ((pattern.test(d))) {
           return true;
       } else {
           return false;
       }
     }
 </script>

之后，如果輸入未驗證，我嘗試發送警報！

tagApi.on('tm:pushed', function(e, tag) {
   if (!phoneNumber(tag)) {
       alert(tag + " is not correct phone number");
   }
});

在這里，我堅持在條件為假時如何防止推送標簽，但我注意到文檔中存在一種方法，用於刪除最后添加的名為tagsManager('popTag');標簽tagsManager('popTag'); .
最后，我將代碼更改如下，以實現將用戶輸入限制為正確格式。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Tag Builder Test</title>
    <link rel="stylesheet" href="css/assets/bootstrap.min.css">
    <link rel="stylesheet" href="css/assets/bootstrap-extend.css">
    <link href="css/tagmanager.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <br />
                    <input id="txtTag" type="text" runat="server" name="tagsk" onkeypress="return IsNumeric(event);"
                        placeholder="Phone Numbers" class="input-medium tm-input tm-input-success tm-input-typeahead form-control" 
                        maxlength="11" >
                    <asp:RegularExpressionValidator CssClass="redError" ID="regval3"
                        runat="server" ErrorMessage="Incorrect input"
                        ValidationExpression="09\d{9}$"
                        ControlToValidate="txtTag"></asp:RegularExpressionValidator>
                    <input id="btn" type="submit" class="btn btn-success btn-block" runat="server" value="click to submit form" onserverclick="btn_ServerClick" />
                </div>
            </div>
        </div>
    </form>
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="../Scripts/WebForms/WebUIValidation.js"></script>
    <script src="js/tagmanager.js"></script>
    <script>
        var tagApi = jQuery(".tm-input.tm-input-typeahead").tagsManager({
            prefilled: [<%=test%>],
            hiddenTagListName: 'hiddenTagAhil',
            validator: null
        });
        tagApi.on('tm:pushed', function(e, tag) {
            if (!phoneNumber(tag)) {
                alert(tag + " is not correct phone number");
                tagApi.tagsManager('popTag');
            }
        });
    </script>
    <script type="text/javascript">
        function phoneNumber(d) {
            var pattern = /09\d{9}$/;
            if ((pattern.test(d))) {
                return true;
            } else {
                return false;
            }
        }

        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            return ret;
        }
    </script>
</body>
</html>

因此，如果用戶輸入錯誤的電話號碼格式，錯誤輸入將立即刪除。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用引導驗證器驗證輸入標簽的列表 如何在Angular JS中驗證沒有表單標簽的輸入？ 驗證 Html 5 沒有表單標簽的輸入？ 如何驗證日期輸入？ 如何使用javascript驗證輸入 如何驗證輸入字段？ 如何驗證輸入是否為日期 如何在JavaScript中驗證輸入？ 如何驗證貨幣輸入 如何使用Google跟蹤代碼管理器Click事件獲取隱藏輸入的屬性
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM