做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤:
首先举一个简单的表单作为例子:
1 <form action="query.php" name="form1" method="get" target="_blank"> 2 <label>请输入要查询的内容:</label> 3 <br /> 4 <br /> 5 <input name="neirong" type="text" class="input1" /> 6 <input type="submit" value="查 询" class="anniu" onclick="return yanzheng()" /> 7 </form>
这个表单样式都在class里定义了,这个不再具体写出,具体样式如图:
那么一般情况我们用JavaScript验证的脚本如下:
1 function yanzheng() 2 { 3 var shuju=document.form1.neirong; 4 if(shuju.value==0) 5 { 6 alert("内容不能为空!"); 7 shuju.focus(); //返回焦点到输入框 8 return false; 9 } 10 }
这就是简单的非空验证,需要注意,JavaScript定义变量是要和form表单的名称对应,提交按钮的onclick事件要和方法对应,如果不为空默认就返回true,方法中就不用写了
这个时候如果内容为空提交表单,会弹出提示框,这是传统的验证方式,下面用jQuery实现一个简单的滑动提示效果
首先,要加载jQuery库,在表单前面加上一句
<script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script>
这个库谷歌和微软网站都可以下载到,微软没被墙,去微软下载吧,里面有好多版本的库,当然也可以直接引用,减小自己服务器压力,jQuery库链接:http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0
然后表单适当位置加一行提示语,我的是放在上面表单代码的第5行后面,感觉挺合适,比如:
<div style="margin-left:360px; color:#09f; font-family:微软雅黑; margin-top:20px; display:none;" class="yanzhengtishi">请输入内容哦!</div>
style的内容也可以放到头部或单独样式文件去,注意一定要有display:none;这一句,意思是默认该div内容不显示,写在class里就比如下面:
1 .yanzhengtishi{ 2 margin-left:360px; 3 color:#09f; 4 font-family:微软雅黑; 5 margin-top:20px; 6 display:none; 7 }
<div class="yanzhengtishi">请输入内容哦!</div>
然后添加jQuery代码,把刚才JavaScript代码替换:
1 function yanzheng() 2 { 3 var shuju=document.form1.neirong; 4 if(shuju.value==0) 5 { 6 $(document).ready(function(){ 7 $(".yanzhengtishi").slideDown("slow"); 8 }); 9 shuju.focus(); 10 return false; 11 }else{ 12 $(document).ready(function(){ 13 $(".yanzhengtishi").slideUp("slow"); 14 }); 15 } 16 }
else子句内容代表,如果内容不为空则重新隐藏提示,注意提示内容的class要加入jQuery的位置,总体来说就这么简单,只是我表达的有些啰嗦,大体变化就如下图,
其实jQuery还能实现很多纯点击事件非常炫酷的特效,不用自己编写逻辑就可以实现,这确实是一个非常有趣的库