前端小白的我在学习JavaScript、jQuery的过程中接触到了一些实例用法，在此举例说明。
构建一个初始状态隐藏起来的导航栏，只有一个小按钮悬挂于界面左侧来提示用户。当点击小按钮后，隐藏的导航栏就会浮现，下面是其具体实现。
1.HTML元素的创建
此处依靠了Bootstrap框架快速构建了导航栏框架及其部分简单样式。
代码如下：
<div class="left-navigation navbar-fixed-top"> <div class="left-navigation-bg"> <!--左侧悬挂式小按钮--> <a id="mobile-nav-a" class="left-off" onclick="open_left()" data-toggle="modal" data-target="#left-modal"> <img id="mobile-nav-taggle" class="left-navigation-label center-block" src="img/open.png" /> </a> <div id="mobile-menu" class="mobile-nav hide-nav"> <!--导航栏主体--> <ul class="mobile-menu-ul"> <!--导航栏列表--> <li class="mobile-menu-turn-off text-right" onclick="open_left()"><span class="glyphicon glyphicon-chevron-left"></span></li> <!--关闭按钮--> <li class="dropdown-header"><h3>分类</h3></li> <li><a class="mobile-menu-a" href="#">大致分类1</a></li> <li><a href="#">大致分类2</a></li> <li><a href="#">大致分类3</a></li> <li><a href="#">大致分类4</a></li> <li><a href="#">大致分类5</a></li> <li><a href="#">大致分类6</a></li> <li><a href="#">大致分类7</a></li> <li><a href="#">大致分类8</a></li> <li class="panel-group"> <!--二级导航栏--> <a href="#more" class="panel panel-default panel-heading more-bg" data-toggle="collapse" data-parent="#accordion">更多<span class="caret"></span></a> <ul id="more" class="panel-collapse collapse in panel-more"> <li><a href="#">大致分类9</a></li> </ul> </li> </ul> </div> </div> </div>2.CSS的设置
仅仅依靠Bootstrap提供的样式显得略为单调，
因此对导航栏的样式略加修饰。
代码如下：
/*导航栏隐藏状态下的悬挂小按钮的样式*/ .left-navigation-bg { height:40px; width:40px; background-color:rgba(0,0,0,0.8); border-bottom-right-radius:15px; z-index:12; } .left-navigation-label { position:absolute; height:30px; width:30px; top:5px; left:5px; z-index:12; } /*导航栏显示状态下的样式*/ #mobile-menu { position: fixed; left: 0; width: 220px; height: 85%; background-color: #373737; z-index:200; transition: all 0.3s ease-in; border-top-right-radius:20px; border-bottom-right-radius:20px; } .mobile-nav ul li a { color: gray; display: block; padding: 1em 5%; border-top: 1px solid #4f4f4f; border-bottom: 1px solid #292929; transition: all 0.2s ease-out; cursor: pointer; } .mobile-menu-ul { padding-left:10px; } .mobile-menu-a { border-top-right-radius:20px; }经过样式修饰后，我们就能得到这样的导航栏效果：
导航栏—隐藏状态
导航栏—显示状态
3.JavaScript事件
当我们点击小按钮时，隐藏的导航栏就会浮现。当我们点击导航栏的小箭头时，显示的导航栏又会隐藏。
下面是其具体实现。
<a id="mobile-nav-a" class="left-off" onclick="open_left()" data-toggle="modal" data-target="#left-modal">这是上文代码中小按钮里的a标签代码，我们给其绑定了一个在点击时触发的open_left()事件，下面是open_left()的代码：
function open_left () { var mobileMenu = $("#mobile-menu"); //获取DOM元素mobile-menu的内容 //条件判断 if (mobileMenu.hasClass("show-nav")) { //是否存在show-nav的类 setTimeout(function () { mobileMenu.addClass("hide-nav").removeClass("show-nav"); }, 100) //存在即在100ms后调用此方法 } else { setTimeout(function () { mobileMenu.addClass("show-nav").removeClass("hide-nav"); }, 100) //不存在即在100ms后调用此方法 } }我们通过一个条件判断，判断mobileMenu是否有show-nav的类，如果存在此类，那么就删除其show-nav类，添加一个hide-nav的类，实现了导航栏的隐藏。同理，若是不存在，那么就删除其hide-nav类，添加show-nav类，实现了导航栏的显示。
<li class="mobile-menu-turn-off text-right" onclick="open_left()"><span class="glyphicon glyphicon-chevron-left"></span></li>这是上文代码中导航栏主体里小箭头的li标签代码，它也绑定了open_left()事件，如此一来就实现导航栏的自由切换显示与隐藏。
在账号登录或注册界面一般都会让用户按提示输入相关数据，而我们一般要对这些数据的合法性(是否符合字节要求、有无特殊符号等等)进行检验，进而做出警告或成功提示。借助正则表达式能够实现这一要求。
下面是一个实例展示
1.html构建和css设置
html部分 <embed src="svg/account.svg" class="login_svg"> <input class="form-control login_input_set" type="text" id="login_account" name="login_account" onclick="clear_text('login_account')" onblur="check_account('login_account','login_account_check_end')" placeholder="请输入账号"/><span id="login_account_check_end"></span><br><br> <input class="form-control login_input_set" type="password" id="login_account_key" name="login_account_key" onblur="check_account_key('login_account_key','login_account_key_end')" placeholder="请输入密码" /><span id="login_account_key_end"></span><br><br> CSS部分 .login_input_set { width:50%!important; float:left; }我们就能得到这样的输入框效果：
2.JavaScript事件
当我们输入一段数据，随后系统会开始检验其合法性，若是符合要求，就会出现绿色的√的提示；要是不符合要求（抑或什么都不输入），就会出现红色的"账号错误"的提示，下面是其具体实现。
<input class="form-control login_input_set" type="text" id="login_account" name="login_account" onblur="check_account('login_account','login_account_check_end')" placeholder="请输入账号"/><span id="login_account_check_end"></span>这是上文输入框的代码，我们给它绑定了一个onblur事件(将在用户离开输入框时执行),下面是οnblur="check_account(‘login_account’,‘login_account_check_end’)"事件的具体代码：
function check_account(name,end) { //两个对象参数，第一个name为输入框，第二个end为提示标签 var getvalue = $("input[name='"+name+"']").val(); //获取输入框的值 var objecter = $("#" + end); var special = /[^a-zA-Z0-9]/ig; //正则表达式 if (getvalue.length >= 6 && getvalue.length <= 18) { //条件判断 if (special.test(getvalue) == true) { //判断输入的数据里面是否存在特殊字符 clear_span(end); //清楚提示标签样式 document.getElementById(end).style.color = "#e34141"; //设置标签颜色 document.getElementById(end).innerHTML = "不能使用特殊字符"; //设置标签内容 return 0; } else { clear_span(end); $("#" + end).addClass("glyphicon glyphicon-ok"); //设置标签的类 document.getElementById(end).style.color = "green"; //设置标签的颜色（正确操作的提示） return 1; } } else { clear_span(end); d ocument.getElementById(end).style.color = "#e34141"; //设置标签颜色（错误操作的提示） document.getElementById(end).innerHTML = "账号错误"; //设置标签内容 return 0; } }其中这句代码就是正则表达式，“/[^a-zA-Z0-9]/”表示可以输入a-z，A-Z以及数字0~9，“i”表示不区分大小写，“g”表示是全局匹配。
var special = /[^a-zA-Z0-9]/ig; //正则表达式再通过**special.test()**的方法调用就能判断是否输入值是否符合规范，进而执行不同的操作。
含有特殊字符输入值的操作结果：
错误输入值及空白输入值的操作结果：
正确输入值(输入字节在6~18)的操作结果：
由此就能做到对账号数据的输入值的合法性检验，实现页面效果。
