米拉尤咕的部落格

[效果展示-表單]

[使用步驟，以ASP.NET MVC為例]

Step1、下載檔案

https://github.com/posabsolute/jQuery-Validation-Engine

Step2、在程式中引用

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-validation-engine/jquery.validationEngine.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-validation-engine/languages/jquery.validationEngine-zh_TW.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Styles/jquery-validation-engine/validationEngine.jquery.css")" />
 

Step3、程式碼表示

<script type="text/javascript">
   $(function () {   
       $('#TestForm').validationEngine();
   })   
</script>

<h2>Validate Engine測試</h2>

<form id="TestForm">
   <input type="text" id="Reason" class="form-control validate[maxSize[10]]" style="width:30%" placeholder="不要超過十個字!"/>
   <input type="submit">
</form>

[效果展示]

[MODAL動態新增輸入控制項驗證]

<script type="text/javascript">

    $(function () {

        $("#myBtn").click(function () {

            $("#myModal").modal();

        });

        $('#addButton').on('click', function () {
            var index = $(".DoPtFirstLevel").size();
            $('#parameterTable tbody').append('<tr><td><input   name="Users[' + index + '].UserNo" class="form-control  validate[maxSize[10]]" type="text" placeholder="字數限制請在10字以內!"/></td></tr>');

        });

        $('#TestForm').validationEngine();
    })
</script>

<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

<form id="TestForm">
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <div id="showDPInputTable" class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        測試
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="parameterTable" class="parameterTable table table-striped table-bordered table-hover">

                                <thead>
                                    <tr>
                                        <th class="col-lg-3 col-md-3">測試</th>

                                    </tr>
                                </thead>

                                <tbody></tbody>

                            </table>
                        </div>
                    </div>

                    <div class="panel-footer">
                        <button type="submit" class="btn btn-default btn-lg">新增</button>
                        <input type="button" name="Add" id="addButton" value="新增一列" class="btn btn-info" />
                    </div><!-- panel footer-->
                </div>
            </div><!-- col-lg-12 -->

        </div>
    </div>

</form>

[效果展示]

[提示框位置]

[程式碼]

       $('#Form').validationEngine({ promptPosition: "bottomLeft" });
        $('#Form2').validationEngine({ promptPosition: "bottomRight" });
        $('#Form3').validationEngine({ promptPosition: "centerLeft" });
        $('#Form4').validationEngine({ promptPosition: "centerRight" });
        $('#Form5').validationEngine({ promptPosition: "topLeft" });
        $('#Form6').validationEngine({ promptPosition: "topRight" });
        $('#Form7').validationEngine({ promptPosition: "inline" });

        <input type="text" id="Reason" class="form-control validate[maxSize[10]]" style="width:50%" placeholder="字數限制請在10字以內!" data-errormessage-range-overflow="左下" />

[效果展示]