这篇文章主要为大家展示了“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”这篇文章吧。
主要功能：
用户名必须在5-25个字符之内，而且只能使用字母、数字或下划线，否则不让通过。
密码必须在5-25个字符之内，而且只能使用字母或数字（大小写敏感），否则不让通过。
根据不同密码程度，下面的low、medium和high会改变背景颜色。
确认密码就不说啦。
验证码只是做了个样子，反正就是设成必须是5个数字。
checkbox必须打勾啦，不然不让通过。
点击注册按钮，会有相应的提示框（可关闭）弹出。
HTML:
<body> <div class="container"> <form class="form-horizontal"> <!--username--> <div class="form-group"> <label class="col-sm-3 control-label">Username</label> <div class="col-sm-5 control-div"> <input type="text" class="form-control input-username" placeholder="Letters, numbers or underline."> </div> <div class="col-sm-4 control-div"> <span class="hint hint-username"></span> </div> <div class="col-sm-offset-3 col-sm-5 count"></div> </div> <!--pwd--> <div class="form-group"> <label class="col-sm-3 control-label">Password</label> <div class="col-sm-5 control-div"> <input type="password" class="form-control input-pwd" placeholder="Letters or numbers. Case sensitive."> </div> <div class="col-sm-4 control-div"> <span class="hint hint-pwd"></span> </div> <div class="col-sm-offset-3 col-sm-5 control-div pwd-judge"> <div class="pwd-judge-lv lv-w active">Weak</div> <div class="pwd-judge-lv lv-m">Medium</div> <div class="pwd-judge-lv lv-h">High</div> </div> </div> <!--confirm pwd--> <div class="form-group"> <label class="col-sm-3 control-label">Confirm Password</label> <div class="col-sm-5 control-div"> <input type="password" class="form-control input-pwd-confirm" placeholder="Confirm Password"> </div> <div class="col-sm-4 control-div"> <span class="hint hint-pwd-confirm"></span> </div> </div> <!--veri code--> <div class="form-group"> <label class="col-sm-3 control-label">Verification Code</label> <div class="col-sm-2 control-div"> <input type="text" class="form-control input-veri-code" placeholder="Verification Code"> </div> <div class="col-sm-3 control-div veri-code-img"> <img src=''> <i class="fa fa-refresh" aria-hidden="true"></i> </div> <div class="col-sm-4 control-div"> <span class="hint hint-veri-code"></span> </div> </div> <!--agreement--> <div class="form-group"> <div class="col-sm-offset-3 col-sm-10 control-div"> <div class="checkbox"> <label> <input type="checkbox" class="input-checkbox"> I agree with the <a>agreement</a>. </label> </div> </div> </div> <!--buttons--> <div class="form-group"> <div class="col-sm-offset-3 col-sm-2 control-div"> <button type="button" class="btn btn-success btn-register">Register</button> </div> </div> </form> </div> <!--Register Hints--> <div class="alert alert-success alert-dismissible register-success" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Register Succeeded.</strong> congratulations! </div> <div class="alert alert-danger alert-dismissible register-failed" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Register Failed.</strong> Please check the form and try again. </div> <!--footer--> <footer class="text-center">Designed by <a href="" target="_blank">Alen Hu</a></footer> </body>RegExp部分：
判断用户名：/^\w{5,25}$/g。
判断密码：/^[a-zA-Z0-9]{5,25}$/g。
判断验证码：/^\d{5}$/g。
JQuery：
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
