Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

发布时间：2020-12-18 00:49:06 所属栏目：安全来源：网络整理

导读：1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码管理员名密码确认密码显示名邮箱备注保存关闭 3.js代码 /user/saveUser.html?ma="+Math.random(),data: {"type" :"0","id":$("#adminid").val(),"account":

1.引入css与js

　　bootstrapValidator.min.css

　　bootstrapValidator.min.js

2.html中的modal代码

确认密码

显示名

邮箱

备注

</dd>
</div>
</div>
</dl>
</div>

<div class="modal-footer">

<button onclick="saveAdmin()" type="button" class="btn btn-success">
<i class="fa fa-check"></i> 保存
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> 关闭
</button>
</div>
</form>
</div>
</div>
</div>
</div></pre>
</div>
<p><h3>3.js代码</h3></p>
<div class="jb51code">
<pre class="brush:js;">
//保存
function saveAdmin(){
//开启验证
$('#saveadmin_form').data('bootstrapValidator').validate(); 
if(!$('#saveadmin_form').data('bootstrapValidator').isValid()){ 
return ; 
} 
//表单提交
$.ajax({
type: "POST",dataType : 'json',url: "<%=request.getContextPath()%>/user/saveUser.html?ma="+Math.random(),data: {
"type" :"0","id":$("#adminid").val(),"account":$("#edit_adminName").val(),"display_name":$("#edit_displayName").val(),"password":$("#edit_passwd").val(),"mail":$("#edit_Mail").val(),"role":$("#edit_role").val(),"desc":$("#edit_desc").val()
},success :function(json) {
json = eval("("+json+")");
$("#editModal").modal("hide");
$("#dialog_content").html(json.message);
$("#dialog_button_queren").hide();
$("#dialog_modal").modal("show");
t.ajax.reload( null,true );
}
});
}
//初始化表单验证
$(document).ready(function() {
formValidator();
});
/*********************************校验重置重点在这里 当modal隐藏时销毁验证再重新加载验证****************************************/ 
//Modal验证销毁重构
$('#editModal').on('hidden.bs.modal',function() {
$("#saveadmin_form").data('bootstrapValidator').destroy();
$('#saveadmin_form').data('bootstrapValidator',null);
formValidator();
});
//form验证规则
function formValidator(){
$('#saveadmin_form').bootstrapValidator({
message: 'This value is not valid',feedbackIcons: {
valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'
},fields: {
//管理员名
edit_adminName: {
message: '管理员名验证失败',validators: {
notEmpty: {
message: '管理员名不能为空'
},stringLength: {
min: 5,max: 64,message: '管理员名长度必须在6到64位之间'
}
}
},//密码
edit_passwd: {
message: '密码验证失败',validators: {
notEmpty: {
message: '密码不能为空'
},message: '密码长度在5到64之间'
}/*,identical: {
field: 'edit_passwd1',message: '两次密码不相同'
} */
}
},//密码确认
edit_passwd1: {
message: '密码确认验证失败',validators: {
notEmpty: {
message: '密码确认不能为空'
},identical: {
field: 'edit_passwd',message: '两次密码不相同'
}
}
},//显示名
edit_displayName: {
message: '用户名验证失败',validators: {
notEmpty: {
message: '显示名不能为空'
},max: 128,message: '显示名长度必须在6到18位之间'
}
}
},//邮箱
edit_Mail: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},emailAddress: {
message: '邮箱格式正确'
},stringLength: {
max:256,message: '邮箱长度必须小于256'
}
}
},//备注
edit_desc: {
message: '备注验证失败',validators: {
stringLength: {
max: 256,message: '备注长度长度必须小于256'
}
}
},}
});
}</pre>
</div>
<p>以上所述是小编给大家介绍的Bootstrapvalidator校验、校验清除重置的实现代码(推荐)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583991.html" target="_blank">thymeleaf+bootstrap，onclick传参实现模态框中遇到的错误</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/545638.html" target="_blank">MyGeneration学习笔记(9) ：在WebService使用dOOdad时,对To</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/492537.html" target="_blank">如何使用scala.util.parsing.ast.Binders？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/374238.html" target="_blank">unix – 如何将参数传递给shell脚本？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/396934.html" target="_blank">如何使用bash替换在列表的每个元素的末尾附加换行符</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/554026.html" target="_blank">angular – Cordova无法使用–target读取未定义的属性’nam</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584513.html" target="_blank">bootstrap-datetimepicker.js插件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/357000.html" target="_blank">shell操作mysql</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/440219.html" target="_blank">如何使用DataGrip访问Docker虚拟网络后面的PostgreSQL实例？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/376449.html" target="_blank">使用adb shell将文本粘贴到Android模拟器剪贴板中</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/581130.html" target="_blank">Bootstrap 分页</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/381269.html" target="_blank">shell 之顺序调用多个脚本上技巧及可能的问题</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/584414.html" target="_blank">bootstrap日期时间控件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/344290.html" target="_blank">linux下发邮件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/558731.html" target="_blank">angularjs – 在Restangular中发送GET参数</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/558117.html" target="_blank">angularjs – 应用程序架构：指令与控制器</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/380198.html" target="_blank">unix – 为文件系统定义PATH_MAX？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/523073.html" target="_blank">调用weblogic发布的webservice报如下错误：</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/472429.html" target="_blank">存储 – youtube在哪里存储了这么多视频？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/476408.html" target="_blank">scala – 与Akka有问题2.1.2计划程序(‘系统’无</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>