Jquery 实现表单验证,所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<html> <head> <meta http-equiv= "content-type" content= "text/html; charset=utf-8" > <title>Reg</title> <style> .state1{ color:#aaa; } .state2{ color:#000; } .state3{ color:red; } .state4{ color:green; } </style> <script src= "jquery.js" ></script> <script> $( function (){ var ok1=false; var ok2=false; var ok3=false; var ok4=false; // 验证用户名 $( 'input[name="username"]' ).focus( function (){ $(this).next().text( '用户名应该为3-20位之间' ).removeClass( 'state1' ).addClass( 'state2' ); }).blur( function (){ if ($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!= '' ){ $(this).next().text( '输入成功' ).removeClass( 'state1' ).addClass( 'state4' ); ok1=true; } else { $(this).next().text( '用户名应该为3-20位之间' ).removeClass( 'state1' ).addClass( 'state3' ); } }); //验证密码 $( 'input[name="password"]' ).focus( function (){ $(this).next().text( '密码应该为6-20位之间' ).removeClass( 'state1' ).addClass( 'state2' ); }).blur( function (){ if ($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!= '' ){ $(this).next().text( '输入成功' ).removeClass( 'state1' ).addClass( 'state4' ); ok2=true; } else { $(this).next().text( '密码应该为6-20位之间' ).removeClass( 'state1' ).addClass( 'state3' ); } }); //验证确认密码 $( 'input[name="repass"]' ).focus( function (){ $(this).next().text( '输入的确认密码要和上面的密码一致,规则也要相同' ).removeClass( 'state1' ).addClass( 'state2' ); }).blur( function (){ if ($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!= '' && $(this).val() == $( 'input[name="password"]' ).val()){ $(this).next().text( '输入成功' ).removeClass( 'state1' ).addClass( 'state4' ); ok3=true; } else { $(this).next().text( '输入的确认密码要和上面的密码一致,规则也要相同' ).removeClass( 'state1' ).addClass( 'state3' ); } }); //验证邮箱 $( 'input[name="email"]' ).focus( function (){ $(this).next().text( '请输入正确的EMAIL格式' ).removeClass( 'state1' ).addClass( 'state2' ); }).blur( function (){ if ($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){ $(this).next().text( '请输入正确的EMAIL格式' ).removeClass( 'state1' ).addClass( 'state3' ); } else { $(this).next().text( '输入成功' ).removeClass( 'state1' ).addClass( 'state4' ); ok4=true; } }); //提交按钮,所有验证通过方可提交 $( '.submit' ).click( function (){ if (ok1 && ok2 && ok3 && ok4){ $( 'form' ).submit(); } else { return false; } }); }); </script> </head> <body> <form action= 'do.php' method= 'post' > 用 户 名:<input type= "text" name= "username" > <span class = 'state1' >请输入用户名</span><br/><br/> 密 码:<input type= "password" name= "password" > <span class = 'state1' >请输入密码</span><br/><br/> 确认密码:<input type= "password" name= "repass" > <span class = 'state1' >请输入确认密码</span><br/><br/> 邮 箱:<input type= "text" name= "email" > <span class = 'state1' >请输入邮箱</span><br/><br/> <a href= "javascript:;" ><img class = 'submit' type= 'image' src= './images/reg.gif' /></a> </form> </body> |
Jquery 实现表单验证,所有验证通过方可提交的更多相关文章
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery实现表单验证
表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- 使用 纯JQuery 进行 表单 验证
对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性.下面就来分享一个JQuery实现的表 ...
- 雷林鹏分享:jQuery EasyUI 表单 - 表单验证
jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
随机推荐
- [BALTIC 2008] Grid
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1169 [算法] 首先DFS枚举出横着切的 然后二分 + 贪心即可 时间复杂度 : O ...
- redis安装及启动及设置
1. 安装 1.1 下载解压包,直接解压到任意路径下即可 windows下载地址:ttps://github.com/MSOpenTech/redis/releases 2.启动 2.1 启动要先开启 ...
- Poj 1067 取石子游戏(NIM,威佐夫博奕)
一.Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子. ...
- Python知识点:distutils常用子模块
from distutils.core import setup, Extension, Commandfrom distutils.command.build import buildfrom di ...
- PCB设计基础及技巧
一.设计步骤 (1)PCB布局 先放置接口类外设: 根据飞线的接口方向,定位各个模块的方位: 局部模块化(按照一个方向逐个局部化): (2)PCB布线 设置设计规则: 先布过孔(电源.地.长线),防止 ...
- [转载][效率工具推荐]Mathpix – 将图片数学公式转换为 LaTeX
转自小众软件:Mathpix – 将图片数学公式转换为 LaTeX Mathpix 是一款跨平台(Windows.macOS.Linux)的 OCR 工具,它能够识别复杂的数学公式,并将其转换为 La ...
- 核PCA与PCA的精髓和核函数的映射实质
1.PCA简介 遭遇维度危机的时候,进行特征选择有两种方法,即特征选择和特征抽取.特征选择即经过某种法则直接扔掉某些特征,特征抽取即利用映射的方法,将高维度的样本映射至低维度.PCA(或者K-L变换) ...
- Linux服务器监控工具--Nmon介绍
一.Nmon介绍(详细请参考百度百科) 是一款分析 AIX 和 Linux 性能的免费工具,这个高效的工具可以工作于任何哑屏幕.telnet 会话.甚至拨号线路.另外,它并不会消耗大量的 CPU 周期 ...
- Centos下添加/删除用户
useradd具体参数 [root@yhwang ~] useradd -h Usage: useradd [options] LOGIN useradd -D useradd -D [options ...
- HDU 3915 Game (高斯消元)
题意:有n堆石子,每个人只能从某一堆至少拿走一个,不能拿者败.问事先拿走某些堆的石子,使得先手必败. 析:将石子拆成二进制,未知数为1表示保留该堆石子,为0表示事先拿走该堆石子.最后求自由变元的数目, ...