kendoMaskedTextBox 格式的 IP 地址

Question

我正在尝试屏蔽 IP 地址，并在用户输入地址后使其在输入中看起来正确。我需要它来保留点，所以我将它正确地处理到数据库中。

当前结果是这样的我替换了understored但是控件的更新格式不正确。任何帮助都会很棒。

控制台

1__.2.3._ 1.2.3.

UI

123.___.___.___

代码

$(document).ready(function () {
  $("#txtstartIpAddr").kendoMaskedTextBox({
    mask: "000.000.000.000",
    clearPromptChar: true,
    change:startIpAddronKeyPress,

  });
  $("#txtendIpAddr").kendoMaskedTextBox({
    mask: "000.000.000.000", 
    clearPromptChar: true,
    change:endIpAddronKeyPress,
  });

  function startIpAddronKeyPress(){
     const startcontrolIpAddr = $('#txtstartIpAddr').getKendoMaskedTextBox().value();
        console.log(startcontrolIpAddr);
     const result = startcontrolIpAddr.replace(/_/g, '');
     $("#txtstartIpAddr").getKendoMaskedTextBox().value(result);
    console.log(result);
  }
  
  function endIpAddronKeyPress(){
    const endIpAddr = $('#txtendIpAddr').getKendoMaskedTextBox().value();
    const result = endIpAddr.replace(/\s/g, '');
    $("#txtendIpAddr").getKendoMaskedTextBox().value(result);
    console.log(result);
  }
  
});

http://dojo.telerik.com/@mcdevitt/itAmAceW

Answer 1

就在 2021 年 7 月 22 日，Telerik（Kendo-UI 的所有者）拒绝实现使 MaskedTextBox 代表组（如 IP4 地址的部分）的功能.参见：https://feedback.telerik.com/kendo-jquery-ui/1359639-maskedtextbox-ip-address

一种替代方法是利用单独的库，例如这个答案：

另一种选择是加入四个 MaskedTextBox 输入，它们都具有 000 的掩码，以类似于 IP 地址输入的方式布置它们，然后当控件更改时，更新单个使用来自输入的原始值的值。然后当你需要使用该值时，使用RegEx来验证输入是否有效。这些方面的内容：

$(document).ready(function() {
  let ip4 = '';

  const maskedtextboxUpdate = function() {
    const part1 = $('#maskedtextbox-ip1').data('kendoMaskedTextBox').raw();
    const part2 = $('#maskedtextbox-ip2').data('kendoMaskedTextBox').raw();
    const part3 = $('#maskedtextbox-ip3').data('kendoMaskedTextBox').raw();
    const part4 = $('#maskedtextbox-ip4').data('kendoMaskedTextBox').raw();
    ip4 = `${part1}.${part2}.${part3}.${part4}`;
  };

  $('#button-validate').on('click', function() {
    const regexIP4 = /(\b25[0-5]|\b2[0-4][0-9]|\b[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}/g;

    if (!regexIP4.test(ip4)) {
      kendo.alert('Please enter a valid IP address.');
      return;
    }
    kendo.alert('The IP address is valid.');
  });
  $('#maskedtextbox-ip1').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip2').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip3').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
  $('#maskedtextbox-ip4').kendoMaskedTextBox({
    mask: '000',
    change: maskedtextboxUpdate
  });
});

<link href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>

<div>
  <input id="maskedtextbox-ip1" />
  .
  <input id="maskedtextbox-ip2" />
  .
  <input id="maskedtextbox-ip3" />
  .
  <input id="maskedtextbox-ip4" />
</div>
<button class="k-button" id="button-validate">Validate</button>

道场：https://dojo.telerik.com/AhOGULUP

Answer 2

这就是我在 jQuery 中所做的（后来我转向了 Angular 和 FormGroup 验证）。

var viewModel = kendo.observable({
  ip_addr: "",
  submit: function() {
    var validator = $("#example").kendoValidator({
      rules: {
        checkIP: function(input) {
          if (input.is("[name='Controller IP Address']") && input.val()) {
            input.attr(
              "data-checkIP-msg",
              "IP Address format is incorrect"
            );
            return validate_ip_address(input.val());
          }
          return true;
        }
      }
    }).data("kendoValidator");

    if (!validator.validate()) {
      console.warn("validation failed");
      return;
    } else {
      console.log(this.ip_addr);
    }
  },
});

kendo.bind($("#example"), viewModel);

function numeric_with_period(e) {
  var key;
  var keychar;
  if (window.event) key = window.event.keyCode;
  else if (e) key = e.which;
  else return true;
  keychar = String.fromCharCode(key);
  keychar = keychar.toLowerCase();
  // control keys
  if ((key === null) || (key === 0) || (key === 8) || (key === 9) || (key === 13) || (key === 27))
    return true;
  // alphas and numbers
  else if ((("0123456789.").indexOf(keychar) > -1))
    return true;
  else
    return false;
}

function validate_ip_address(ip_address) {
  if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip_address)) {
    return (true)
  } else return (false)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>

<div id="example">
  <input name="Controller IP Address" data-role="maskedtextbox" data-bind="value: ip_addr" onkeypress="return numeric_with_period(event);" data-checkIP-msg="IP Address format is incorrect" maxlength="15" />
  <br />
  <span class="k-invalid-msg" data-for="Controller IP Address"></span>
  <br />
  <button data-role="button" class="k-button" data-bind="events: { click: submit }">Submit</button>
</div>

kendoMaskedTextBox 格式的 IP 地址

kendoMaskedTextBox format IP address

networking

jquery

kendo-ui