18

jquery の邪魔にならないクライアント検証でコンマの問題を修正するために、jQuery グローバリゼーション プラグインを使用しようとしています。しかし、私は多くの解決策を試しましたが、これを修正するための良い解決策はありません. 私は英語以外のローカリゼーション コンピューターを使用しており、顧客が「123.66」ではなく「123,66」のような 10 進数値を入力することが重要です。ASP.NET の検証で、価格は数値でなければならないことがわかりました。えっ？真剣ですか ？笑

修正しようとすると、この JavaScript エラーが発生します。

$.global is undefined

ここに私のコード。

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

glob.fix.js

$.validator.methods.range = function (value, element, param) {
   var globalizedValue = value.replace(",", ".");
   return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}

$.validator.methods.number = function (value, element) {
   return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}

理解できません..追加したので動作するはずです~/Scripts/globalize.js。

何か案が？または、クライアントの検証を機能させるためのより良い解決策があり、カンマを10進数として入力できるようにすることはできますか?

4

3 に答える 3

21

コンマ区切りで小数の問題を最終的に取り除く方法を見つけました!

結果の画像はこちら！検証の問題はもうありません。

ここに画像の説明を入力

修正への手順。

1- jQuery のグローバリゼーション ライブラリを入手する

最新のスクリプトを取得する必要があります。また、時代遅れの回答がいくつか見つかりました。
ライブラリを呼び出すオブジェクトは、それ以上$.globalまたはそのようなものではなく、Globalize.

2- プロジェクトにスクリプトを含めます。それらはものの後に追加する必要がありますjquery.validation。

<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>

3- バリデーターのいくつかのメソッドを置き換えます。これにより、問題の原因となっていた 'number' および 'range' 検証のメソッドがオーバーライドされます。

$.validator.methods.number = function (value, element) {
    return this.optional(element) || !isNaN(Globalize.parseFloat(value));
} 

$.validator.methods.range = function (value, element, param) {
    return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}

Globalize.parseFloat=> これにより、実際には「,」を含むものはすべて「.」に置き換えられます。それを必要とする文化を選択した場合。

この後..追加する必要があります。これにより、グローバリゼーション関数がカルチャで機能するようになります。

$(document).ready(function () {
        Globalize.culture('fr-CA');

        // Only there to show which culture are being used.
        console.log(Globalize.culture().name);
});

完全なコードは次のようになります...

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>


<script type="text/javascript">

    $.validator.methods.number = function (value, element) {
        return this.optional(element) || !isNaN(Globalize.parseFloat(value));
    } 
    $.validator.methods.range = function (value, element, param) {
        return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
    }

    $(document).ready(function () {
        Globalize.culture('fr-CA');

        // Only there to show which culture are being used.
        console.log(Globalize.culture().name);
    });
</script>

</head>

<body>
    @RenderBody()
</body>
</html>
于 2012-02-10T00:24:07.110 に答える
2

さて、同じ問題を解決するために、私は次のようにしました：

$.validator.addMethod("price",function(value){
    return /^(?:\d+|\d{1,3}(?:\.\d{3})+)(?:,\d+)?$/.test(value);
});

次に、追加されたメソッドをルールとして使用しました。

$("#form").validate({
    rules: {
        price: "price"
    }
});

検証プラグイン自体からバリデータの正規表現を「借用」し、ドット.とコンマを逆にしました,(千の区切り X 小数点の区切り)。

于 2012-02-09T03:17:32.777 に答える
0

なんらかの理由で、グローバル化の参照を次から変更する必要がありました。

<script src="@Url.Content("~/Scripts/globalize/globalize.js")" type="text/javascript"</script>

に

<script type="text/javascript" src="~/Scripts/globalize/globalize.js"</script>

そして、それは私の問題を解決しました。動作するまで30分間夢中になりました。誰かが理由を説明できれば、私は感謝します。

于 2016-01-14T14:28:36.407 に答える