bootstrap validator動態增加驗證
阿新 • • 發佈：2019-01-29
1，以前·沒用過這個東西，為了給妹子解決問題，搜尋相關部落格，寫了這麼一個辦法
<!DOCTYPE html> <html> <head> <title>BootstrapValidator demo</title> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" /> <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> </head> <body> <form id="form1"> <input type="button" value="新增" onclick="add()"> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" /> </div> <div class="form-group"> <label>aa</label> <select id="aa" name="AA" class="form-control" ><option value="0">請選擇</option><option value="1">小明</option></select>' </div> </form> </body> <script type="text/javascript"> $('form').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '使用者名稱驗證失敗', validators: { notEmpty: { message: '使用者名稱不能為空' } } }, } }); var index=1; function add() { // body.. var html='<div class="form-group"> <label>aa'+index+'</label><select id="aa'+index+'" class="form-control aa'+index+'" name="AA'+index+'" ><option value="0">請選擇</option><option value="1">小明</option></select></div>'; $("form").append(html); $("form").bootstrapValidator('addField',$("#aa"+index),{ validators:{ notEmpty:{ message:'學生不能為空' }, callback: { message: '必須選擇一個學生', callback: function(value, validator) { if (value == 0) { return false; } else { return true; } } } } } ); index++; } </script> </html>