All Components

MaskedTextBox / Validation

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Validation</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <form id="employeeForm" data-role="validator" novalidate> 
     <ul id="fieldlist"> 
      <li> <label for="FirstName">First Name:</label> <input type="text" class="k-textbox" name="FirstName" id="FirstName" required> </li> 
      <li> <label for="LastName">Last Name:</label> <input type="text" class="k-textbox" name="LastName" id="LastName" required> </li> 
      <li> <label for="PhoneNumber">Phone Number:</label> <input type="text" data-role="maskedtextbox" data-mask="(999) 000-0000" id="PhoneNumber" name="PhoneNumber" data-validmask-msg="Phone number is incomplete" required> <span data-for="PhoneNumber" class="k-invalid-msg"></span> </li> 
      <li class="actions"> <button type="button" data-role="button" data-sprite-css-class="k-icon k-i-tick" data-click="save">Save</button> </li> 
     </ul> 
    </form> 
   </div> 
   <script type="text/javascript">
                $(function () {
                    var container = $("#employeeForm");
                    kendo.init(container);
                    container.kendoValidator({
                        rules: {
                            validmask: function (input) {
                                console.log(input);
                                if (input.is("[data-validmask-msg]") && input.val() != "") {
                                    var maskedtextbox = input.data("kendoMaskedTextBox");
                                    return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                                }

                                return true;
                            }
                        }
                    });
                });

                function save(e) {
                    var validator = $("#employeeForm").data("kendoValidator");
                    if (validator.validate()) {
                        alert("Employee Saved");
                    }
                }

            </script> 
   <style>

                #fieldlist {
                    margin: 0 0 -2em;
                    padding: 0;
                }

                #fieldlist li {
                    list-style: none;
                    padding-bottom: 2em;
                }

                #fieldlist label {
                    display: block;
                    padding-bottom: 1em;
                    font-weight: bold;
                    text-transform: uppercase;
                    font-size: 12px;
                    color: #444;
                }

                #fieldlist input {
                    width: 100%;
                }

                span.k-tooltip {
                    margin-top: 5px;
                    line-height: 1.7em;
                    width: 100%;
                    box-sizing: border-box;
                    text-align: left;
                }

            </style> 
  </div>   
 </body>
</html>