时间戳

首页 > 解决方案 > 如何配置 JQuery Validate 和 InputMask-robinherbots 一起工作

jquery - 如何配置 JQuery Validate 和 InputMask-robinherbots 一起工作

问题描述

html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/inputmask.js"></script>
   <script src="js/inputmask.numeric.extensions.js"></script>
   <script src="js/jquery.inputmask.js"></script>
    <script src="js/script.js"></script>

/head>
<body>
    <form class="myform">
        <h2>Enter sum</h2>
        <div>
            <input  class="numberInputUs" name="numberUs" type="text" />
        </div>
        <br />
        <br />
      </form>
    <hr />
 </body>
</html>

脚本

$(document).ready(function () {

    $('.myform').validate({
        rules: {

            numberUs: {
                required: true,
                range: [2, 100000000]
            },

        },
    });

    validateAfterLossFocus();

    setAliasForCurrency();
    $("input").val(''); 
   setMaskInput();/

});


function validateAfterLossFocus() {

    $('input').on('blur', function () {
        $(this).submit(); 
    })


}

function setAliasForCurrency(){

    Inputmask.extendAliases({
        us: {
            prefix: "$",
            groupSeparator: ".",
            alias: "numeric",
            placeholder: "0",
            autoGroup: !0,
            digits: 2,
            digitsOptional: !1,
            clearMaskOnLostFocus: !1,
            allowMinus: 'false'
        }
    });
}


function setMaskInput() {

    //$('.numberInputUs').inputmask("currency");  
    //$('.numberInputUs').inputmask({ alias: "currency", prefix: '' }); 

    $('.numberInputUs').inputmask({ alias: "us" }); 

}

在 InputMask 中使用此类参数时，如：-prefix、groupseparator、digits，则验证工作不正确。如何确保保留两种格式并准确验证。

我认为'占位符'和'分隔符'，验证器被识别为符号，它正在考虑它们......

更新 2

我写了这样的代码。

 Inputmask.extendAliases({
        byn: {
            min: 2,
            max: 200000,
            prefix: "$",
            groupSeparator: ".",
            alias: "numeric",
            placeholder: "0",
            autoGroup: !0,
            digits: 2,
            digitsOptional: !1,
            clearMaskOnLostFocus: !1,
            allowMinus: 'false',

        }
    });

但是用户很困惑，您可以输入更多的数字。另外，如何添加错误输入数字的警报

标签： jqueryjquery-validateinput-mask

解决方案

推荐阅读