Bootstrap是一種前端框架,可以幫助我們快速構建漂亮的網站,并提供了許多有用的組件和插件。其中之一是JSON校驗,它可以用于驗證用戶輸入的JSON數據是否有效。
// 示例JSON { "name": "Jack", "age": 25, "job": "Software Engineer", "hobbies": ["Coding", "Reading", "Traveling"] }
Bootstrap JSON校驗插件需要引入兩個文件:jquery.js和bootstrap-validator.js。在HTML頁面中,添加以下代碼:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
然后,我們需要為表單添加validator。例如:
<form id="myForm" method="post"> <div class="form-group"> <textarea name="jsonInput" class="form-control" rows="10"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <script> $(document).ready(function(){ $('#myForm').bootstrapValidator({ fields: { jsonInput: { validators: { notEmpty: { message: 'JSON不能為空' }, json: { message: '請輸入有效的JSON格式' } } } } }); }); </script>
在這個例子中,我們給表單添加了一個名為“jsonInput”的文本框,并使用Bootstrap Validator插件驗證了輸入的JSON數據是否有效。如果JSON無效,會提示相應的錯誤消息。
總的來說,Bootstrap JSON校驗插件是一個非常有用的工具,它可以幫助我們確保用戶輸入的JSON數據是有效的。在使用這個插件時,我們需要仔細了解其文檔和API,并確保正確地配置驗證規則和錯誤消息。
下一篇css3切換圖片輪播