用jquery实现简单的表单验证
HTML代码:
1 <form action="" method="post" id="form-data">
2 <div id="content">
3 <div>
4 <label for="username">用户名:</label>
5 <input type="text" name="username" id="username">
6 <span class="error">用户名不能为空!</span> </div>
7 <div>
8 <label for="email">邮箱:</label>
9 <input type="text" id="email" name="email">
10 </input>
11 <span class="error">邮箱格式错误!</span> </div>
12 <div>
13 <label for="tel">电话号码:</label>
14 <input type="text" name="tel" id="tel">
15 <span class="error">电话号码格式正确!</span> </div>
16 <div>
17 <label for="msg">留言:</label>
18 <textarea name="mess" id="mess"></textarea>
19 <span class="error">留言不能为空!</span> </div>
20 <div class="submit-box">
21 <button type="submit">提交</button>
22 </div>
23 </div>
24 </div>
25 </form>
css代码:
1 #content div label {
2 display: inline-block;
3 width: 100px;
4 text-align: right;
5 }
6 #content div {
7 margin-top: 10px;
8 }
9 #content textarea {
10 vertical-align: top;
11 height: 5em;
12 }
13 #content span {
14 display: none;
15 color: #f00;
16 }
17 .submit-box {
18 padding-left: 50px;
19 }
20 #content input.fail, #content textarea.fail {
21 border: 1px solid #F00;
22 }
23 #content input.succ, #content textarea.succ {
24 border: 1px solid #06F;
25 }
jquery代码:
1 $(function(){
2 //用户名非空验证
3 $("#username").on("input",function(){
4 var $this=$(this);
5 if($this.val()){
6 $(this).addClass("succ").removeClass("fail");
7 }else{
8 $(this).addClass("fail").removeClass("succ");
9 }
10 })
11 //邮箱验证
12 $("#email").on("input blur",function(){
13 var $this=$(this);
14 var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
15 var is_email=re.test($(this).val());
16 if(is_email){
17 $(this).addClass("succ").removeClass("fail");
18 }else{
19 $(this).addClass("fail").removeClass("succ");
20 }
21 });
22 //验证手机号码
23 $("#tel").on("input",function(){
24 var $this=$(this);
25 var re=/1\d{10}/;
26 var is_tel=re.test($(this).val());
27 if(is_tel){
28 $(this).addClass("succ").removeClass("fail");
29 }else{
30 $(this).addClass("fail").removeClass("succ");
31 }
32 });
33 //留言非空验证
34 $("#mess").keyup(function(event) {
35 var $this=$(this);
36 if($this.val()){
37 $(this).addClass("succ").removeClass("fail");
38 }else{
39 $(this).addClass("fail").removeClass("succ");
40 }
41 });
42
43 $("#form-data").submit(function(event){
44 var falg=true;
45 //$('element', this)相当于$(this).find('element')
46 $("input,textarea",this).each(function() {
47 var $this=$(this);
48 var is_succ=$this.hasClass("succ");
49 if(is_succ){
50 $this.siblings(".error").hide();
51 }else{
52 $this.siblings(".error").show();
53 falg=false;
54 }
55 });
56 if(falg){
57 alert("submit success!");
58 }else{
59 event.preventDefault();
60 }
61 });
62
63 })
效果图如下:
用jquery实现简单的表单验证的更多相关文章
- jQuery之简单的表单验证
html部分: <body> <form method="post" action=""> <div class="in ...
- JQuery在一个简单的表单验证的例子
html代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- 简单的表单验证插件(Jquery)
在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...
- jQuery简单前端表单验证
<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...
随机推荐
- Unity3d优化
检测方式: 一,Unity3D 渲染统计窗口 Game视窗的Stats去查看渲染统计的信息: 1.FPS fps其实就是 frames per second,也就是每一秒游戏执行的帧数,这个数值越小, ...
- php使用strlen()判断中文汉字字符串长度
php使用strlen()判断中文汉字字符串长度 对于含有中文情况,此时可以采用: iconv_strlen($str,"UTF-8"); iconv_strlen 是无论是何种编 ...
- 动态给drawable上色
只加载一个资源,然后在运行的时候通过ColorFilter进行上色 public Drawable colorDrawable(Resources res, @DrawableRes int draw ...
- 关于Currency类型和 TCurrencyFiled的悲剧
这2天程序出问题, 用户结算金额经常莫名其妙的多出了小数点后几位, 不用思考 肯定是因为浮点精度不准确的问题 查了一下, 程序中的数据类型使用的是Currency, 按照数据类型的描述, 这个金额类型 ...
- jquery中.attr('value')和.val()的区别
.val() 能够取到 针对text,hidden可输入的文本框的value值. 而 .attr('value') 可以取到html元素中所设置的属性 value的值,不能获取动态的如input ty ...
- oracle 判断字符串是否日期格式
select case when to_char(TO_DATE(NVL('2015- 8', 'a'), 'yyyy-mm'),'yyyy-mm')='2015- 8' then 1 else 0 ...
- CSS之border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux pptpd账号同时登录的问题
最近搞了个云主机搭建个VPN服务器给自己用, 特别是在公共场所的wifi上网时, 很多APP, 或者网站是没有https的, 所以为了保证信息(主要是账号密码)的安全, 搭个私有vpn还是很有必要的. ...
- LuaXMLRPC笔记
XMLRPC XMLRPC 为以http为传输协议,使用xml格式化数据来执行远程过程调用, 区别于本地过程调用, 即发生在不同主机之间. 属于分布式计算的一种简单实现,比web service简单易 ...
- ubuntu 常用命令集合版(一)【大侠勿喷,菜鸟欢迎】(转载)
1:apt-get:(一般是要加sudo) debian系系统的软件包管理程序(其图形化前端就是大名鼎鼎的新立得了),会自动帮你搞定依赖关系最常用参数:update —-与你的软件源(在 ...