Javascript配合jQuery实现流畅的前端验证

  做前端时一般都习惯用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还能实现很多纯点击事件非常炫酷的特效,不用自己编写逻辑就可以实现,这确实是一个非常有趣的库

时间: 2024-10-12 22:53:30

Javascript配合jQuery实现流畅的前端验证的相关文章

MVC笔记2:mvc+jquery.validate.js 进行前端验证

1.引用如下js和css 代码 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="style

jQuery结合Ajax实现简单的前端验证和服务端查询

上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 1 <form name="form2"> 2 <label class="style1">请输入要查询的内容:</label> 3 <br /> 4 <br /> 5 <input name="neirong&quo

简单的jQuery前端验证码校验

简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-widt

【Javascript】jQuery Validate扩展验证方法

/*****************************************************************jQuery Validate扩展验证方法*****************************************************************/// 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", function (value, element) { valu

小前端大能耐——Canvas与Javascript配合实现几个功能

1.粒子化 function Dot(X, Y, Z, R) { this.dx = X; this.dy = Y; this.dz = Z; this.tx = 0; this.ty = 0; this.tz = 0; this.z = Z; this.x = X; this.y = Y; this.r = R; this.paint = function() { context.save(); context.beginPath(); var scale = 250 / (250 + thi

在C#后端处理一些结果然传给前端Javascript或是jQuery

在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus/archive/2011/05/04/2036271.html 是使用Literal控件来实现. 不过还是有些复杂. 本次Insus.NET再简化一些,把值传给前端的jQuery. 用户请求一个网页,送至服务器之后,然后传给客户端.因此服务端传值给jQuery或是javascript是件很容易的事.反之的话

前端验证,jquery.validate插件

jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

第一百七十七节,jQuery,知问前端--概述及 jQuery UI

jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照"知乎"的架构模式来搭建界面和布局,以及大部分前端功能.而"百度 知道"作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮: 3.折叠菜单:4.选项卡切换:5.滑动块:6.日历:7.自动补全:8 拖放:等一系列前端模块. 二.jQuery UI