bootstrap之invalid-feedback

表单检验提示框

代码

 <form  target="addacform" action="/zhou/register" id="addaccountform" name="addaccountform" method="post" onsubmit="return checkzhucepasswd()" ><div class="form-group"><label  class="control-label">账号:</label><input type="text" class="form-control" id="accountform" name="accountname" ><div class="invalid-feedback">账号不能为空</div></div><div class="form-group"><label  class="control-label">真实姓名:</label><input type="text" class="form-control" id="truenameform"  name="name" ><div class="invalid-feedback">姓名不能为空,且大于等于两个字符</div></div><div class="form-group"><label  class="control-label">请输入密码:</label><input type="password" class="form-control" id="newpasswdform" name="password" onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="value=value.replace(/[^A-Za-z0-9]/g,'')" autocomplete="off"><div class="invalid-feedback">密码必须在6~10位之间</div></div><div class="form-group"><label  class="control-label">请输入确认密码:</label><input type="password" class="form-control" id="new2passwdform" name="new2passwd" onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="checkeqpasswd()" autocomplete="off"><div class="invalid-feedback">两次密码必须相同 且在6~10位之间</div></div><div class="form-group"><label  class="control-label">请输入部门:</label><select name="department" id="departmentform" class="form-control"><option value="XXX1">XXXX1</option><option value="XXX2">XXX2</option><option value="XXX3">XXX3</option></select></div><div class="modal-footer"><button type="submit" class="btn btn-primary" id="accountzc">确定</button><button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div></form><!--注册新用户-->
<script>$(function () {var flagAccount=false;var flagTure=false;var flagPas=false;var flagPass=false;/*验证用户名*/var accountForm,truenameForm,passWordForm,passWordForms;/*验证工资号*/$("#accountform").change(function(){accountForm=$("#accountform").val();if(accountForm.length<3){$("#accountform").removeClass("form-control is-valid")$("#accountform").addClass("form-control is-invalid");flagAccount=false;}else{$("#accountform").removeClass("form-control is-invalid")$("#accountform").addClass("form-control is-valid");flagAccount=true;}})/*验证姓名*/$("#truenameform").change(function(){truenameForm=$("#truenameform").val();if(truenameForm.length<2){$("#truenameform").removeClass("form-control is-valid")$("#truenameform").addClass("form-control is-invalid");flagTure=false;}else{$("#truenameform").removeClass("form-control is-invalid")$("#truenameform").addClass("form-control is-valid");flagTure=true;}})/*验证密码*/$("#newpasswdform").change(function(){passWordForm=$("#newpasswdform").val();if(passWordForm.length<6||passWordForm.length>10){$("#newpasswdform").removeClass("form-control is-valid")$("#newpasswdform").addClass("form-control is-invalid");flagPas=false;}else{$("#newpasswdform").removeClass("form-control is-invalid")$("#newpasswdform").addClass("form-control is-valid");flagPas=true;}})/*验证确认密码*/$("#new2passwdform").change(function(){passWordForms=$("#new2passwdform").val();if((passWordForm!=passWordForms)||(passWords.length<6||passWords.length>10)){$("#new2passwdform").removeClass("form-control is-valid")$("#new2passwdform").addClass("form-control is-invalid");flagPass=false;}else{$("#new2passwdform").removeClass("form-control is-invalid")$("#new2passwdform").addClass("form-control is-valid");flagPass=true;}})$("#accountzc").click(function(){if(flagAccount&&flagTure&&flagPas&&flagPass){alert(flagAccount&&flagTure&&flagPas&&flagPass)return true;}else{if(!flagAccount){$("#accountform").addClass("form-control is-invalid");}if(!flagTure){$("#truenameform").addClass("form-control is-invalid");}if(!flagPas){$("#newpasswdform").addClass("form-control is-invalid");}if(!flagPass){$("#new2passwdform").addClass("form-control is-invalid");}return false;}})})$("#accountzc").click(function () {$("#addaccountform").ajaxForm(function (data) {if (data==200){setTimeout(function(){xtip.msg('新增用户成功',{icon:'s'})},100);setTimeout(function(){window.location.reload(); },800);// alert('新增用户成功');// window.location.reload();}else if(data==0){setTimeout(function(){xtip.msg('新增用户失败',{icon:'e'})},100);setTimeout(function(){window.location.reload(); },800);// alert("新增用户失败");// window.location.reload();}else if (data==1){setTimeout(function(){xtip.msg('该账户已存在',{icon:'w'})},100);setTimeout(function(){window.location.reload(); },800);// alert("该账户已存在");//  window.location.reload();}})})</script>

bootstrap之invalid-feedback相关推荐

黄聪： 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
liferay 6.2 主题开发
Developing a Liferay Theme 作为一个开发者,你需要你的站点准确有效的传达你的想法.你不希望你设计的网站限制用户从你的内容总收到影响.这就是主题发挥作用的地方.主题允许你创造性 ...
基于强化学习的自我完善聊天机器人
Elena Ricciardelli, Debmalya Biswas 埃琳娜·里恰德利(Elena Ricciardelli) Abstract. We present a Reinforcemen ...
signature=cb30417dfa65eef445418827e0f0e0e6,以太坊P2P网络节点初始化
问题以太坊底层采用了P2P去中心化网络,在不知道任何其它节点的情况之下,它是如何寻找到其它节点并与之通信的呢? 答案本身一定事先知道了其它节点的首先厘清两个概念 bootnode 从名字上看得出 ...
Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
基于jquery，bootstrap数据验证插件bootstrapValidator 教程
ootstrap:能够增加兼容性的强大框架. 因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. 需要引用css: bootstrap.min.cs ...
Netbeans ClassFormatException: Invalid byte tag in
为什么80%的码农都做不了架构师?>>> 工程启动报错信息: Starting Servlet Engine: Apache Tomcat/7.0.6 org.apache.t ...
sys.stderr.write(f“ERROR: {exc}“) SyntaxError: invalid syntax错误
ubuntu 安装pip3后查询其版本出现错误 Traceback (most recent call last):File "/usr/local/bin/pip3", line ...
【代码片段】base样式--针对bootstrap
/* Document : base.cssCreated on : 2013-02-22Author : KojyaDescription : Style sheet for base. *//* ...

bootstrap之invalid-feedback

表单检验提示框

代码

bootstrap之invalid-feedback相关推荐

最新文章

热门文章