如何实现基于引导3 JQuery及RegExp的表单验证功能

  介绍

这篇文章主要为大家展示了“如何实现基于引导3 JQuery及RegExp的表单验证功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现基于引导3 JQuery及RegExp的表单验证功能”这篇文章吧。

<强>主要功能:

<李>

用户名必须在做个字符之内,而且只能使用字母,数字或下划线,否则不让通过。

<李>

密码必须在做个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过。

<李>

根据不同密码程度,下面的低,中等和高会改变背景颜色。

<李>

确认密码就不说啦。

<李>

验证码只是做了个样子,反正就是设成必须是5个数字。

<李>

复选框必须打勾啦,不然不让通过。

<李>

点击注册按钮,会有相应的提示框(可关闭)弹出。

<强> HTML:

& lt; body>   ,& lt; div 类=癱ontainer"比;   & lt;才能form 类=癴orm-horizontal"比;   ,,& lt; !——用户名——比;   ,,& lt; div 类=癴orm-group"比;   ,,,& lt; label 类=癱ol-sm-3  control-label"祝辞Username   ,,,& lt; div 类=癱ol-sm-5  control-div"比;   ,,,,& lt; input 类型=皌ext",类=癴orm-control  input-username",占位符=白帜?,numbers 或下划线!”在   ,,,& lt;/div>   ,,,& lt; div 类=癱ol-sm-4  control-div"比;   ,,,,& lt; span 类=癶int  hint-username"祝辞& lt;/span>   ,,,& lt;/div>   ,,,& lt; div 类=癱ol-sm-offset-3  col-sm-5  count"祝辞& lt;/div>   ,,& lt;/div>   ,,& lt; !——pwd祝辞   ,,& lt; div 类=癴orm-group"比;   ,,,& lt; label 类=癱ol-sm-3  control-label"祝辞Password   ,,,& lt; div 类=癱ol-sm-5  control-div"比;   ,,,,& lt; input 类型=皃assword",类=癴orm-control  input-pwd",占位符=癓etters 或是数字只Case 敏感!”在   ,,,& lt;/div>   ,,,& lt; div 类=癱ol-sm-4  control-div"比;   ,,,,& lt; span 类=癶int  hint-pwd"祝辞& lt;/span>   ,,,& lt;/div>   ,,,& lt; div 类=癱ol-sm-offset-3  col-sm-5  control-div  pwd-judge"比;   ,,,,& lt; div 类=皃wd-judge-lv  lv-w  active"祝辞Weak
  ,,,,& lt; div 类=皃wd-judge-lv  lv-m"祝辞Medium
  ,,,,& lt; div 类=皃wd-judge-lv  lv-h"祝辞High