jquery-4 完整表单验证实例
jquery-4 完整表单验证实例
一、总结
一句话总结：在form的jquery对象中返回false即可终止表单提交。
1、验证的显示错误消息如何布局？
开始时隐藏，出现错误后显示
10 .error{
11 color:#f00;
12 font-weight: bold;
13 display: none;
14 }
54 if(val.length<6){
55 $(this).data({'s':0});
56 $(this).next().show();
57 }else{
2、如何设置限制表单最多输入11位？
用maxlength属性
42 <input type="text" class="auth" name='phone' maxlength='11'>
3、如何给元素添加data方法来给元素添加属性？
不影响其它属性的属性
58 $(this).data({'s':1});
语法规则是json
4、选择input里面name属性为email的？
88 $('input[name=email]').blur(function(){
5、jquery中如何用this属性？
和在js中一模一样
88 $('input[name=email]').blur(function(){
89 val=this.value;
88 $('input[name=email]').blur(function(){
89 val=this.value;
90
91 if(!val.match(/^\w+@\w+\.\w+$/i)){
92 $(this).data({'s':0});
93 $(this).next().show();
94 }else{
95 $(this).data({'s':1});
96 $(this).next().hide();
97 }
98 });
6、如何验证邮箱（什么方法，正则怎么写）？
string的match方法
91 if(!val.match(/^\w+@\w+\.\w+$/i)){
7、如何取到input：password的下一个span？
jquery中next()方法
105 $(this).next().show();
8、文本框失去焦点事件（jquery）？
blur方法
75 $('input[name=repassword]').blur(function(){
9、如何触发所有class为auth的失去焦点方法？
blue方法
112 $('form').submit(function(){
113 $('.auth').blur();
10、如何在表单提交的时候验证所有表单控件的失去焦点方法？
在form的submit方法中执行blur方法
112 $('form').submit(function(){
113 $('.auth').blur();
11、如何在表单提交的时候验证所有表单控件都验证通过？
给用data()方法给所有的表单控件添加一个属性，属性值为0为1表示是否就绪，最后求所有控件的属性和，结果为控件数说明所有的表单都验证通过
103 if(!val.match(/^139\d{8}$/)){
104 $(this).data({'s':0});
105 $(this).next().show();
106 }else{
115 tot=0;
116
117 $('.auth').each(function(){
118 tot+=$(this).data('s');
119 });
12、如何终止表单的提交？
在form的jquery对象的submit()方法中返回false即可
112 $('form').submit(function(){
121 if(tot!=5){
122 return false;
123 }
13、如何遍历出jquery选择器选择出来的jquery对象？
each方法
117 $('.auth').each(function(){
118 tot+=$(this).data('s');
119 });
14、jquery中控件的显示隐藏用什么方法？
show()和hide()方法
105 $(this).next().show();
108 $(this).next().hide();
二、完整表单验证实例
表单验证完整实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
.error{
color:#f00;
font-weight: bold;
display: none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<form action="reg.php" method='get'>
<p>用户名:</p>
<p>
<input type="text" name='username' class='auth'>
<span class='error'>用户名长度至少6位!</span>
</p>
<p>密码:</p>
<p>
<input type="text" name="password" class='auth'>
<span class='error'>密码长度至少8位!</span>
</p>
<p>确认密码:</p>
<p>
<input type="text" name='repassword' class='auth'>
<span class='error'>两次密码不一致!</span>
</p>
<p>邮箱:</p>
<p>
<input type="text" class="auth" name='email'>
<span class='error'>邮箱格式不正确!</span>
</p>
<p>手机号码:</p>
<p>
<input type="text" class="auth" name='phone' maxlength='11'>
<span class='error'>手机号码不正确!</span>
</p>
<p><input type="submit" value="Ok"></p>
</form>
</body>
<script>
// 表单验证 $('input[name=username]').blur(function(){
val=this.value; if(val.length<6){
$(this).data({'s':0});
$(this).next().show();
}else{
$(this).data({'s':});
$(this).next().hide();
}
}); $('input[name=password]').blur(function(){
val=this.value; if(val.length<8){
$(this).data({'s':0});
$(this).next().show();
}else{
$(this).data({'s':1});
$(this).next().hide();
}
}); $('input[name=repassword]').blur(function(){
val1=$('input[name=password]').val();
val2=this.value; if(val1!=val2){
$(this).data({'s':0});
$(this).next().show();
}else{
$(this).data({'s':1});
$(this).next().hide();
}
}); $('input[name=email]').blur(function(){
val=this.value; if(!val.match(/^\w+@\w+\.\w+$/i)){
$(this).data({'s':});
$(this).next().show();
}else{
$(this).data({'s':1});
$(this).next().hide();
}
}); $('input[name=phone]').blur(function(){
val=this.value; if(!val.match(/^139\d{8}$/)){
$(this).data({'s':0});
$(this).next().show();
}else{
$(this).data({'s':1});
$(this).next().hide();
}
}); $('form').submit(function(){
$('.auth').blur(); tot=0; $('.auth').each(function(){
tot+=$(this).data('s');
}); if(tot!=5){
return false;
}
});
</script>
</html>
jquery-4 完整表单验证实例的更多相关文章
- jQuery Validation Engine 表单验证
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
随机推荐
- 78.pipe多管道云端，客户端通信
压力测试截图: 云端 定义管道缓存区大小,最多连接数量(线程个数),当前线程个数,管道名字 //缓冲区大小 #define SIZE 4096 //最多连接数量 #define MAX_CONNECT ...
- js-YDUI 移动端解决方案
/** * YDUI 可伸缩布局方案 * rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem */ !function (window) { /* 设计图文档宽 ...
- SPOJ 3899. Finding Fractions 连分数
连分数乱搞,我反正是一眼没看出结果 某巨巨把这题讲解的比较详细 : http://blog.csdn.net/gogdizzy/article/details/8727386 令k = [a/b] 然 ...
- layui中select的注意
假如不在select 标签里面加上过滤lay-filter 那么你就算怎么绑定事件都是没有任何效果 页面上代码 js文件:
- NOI2018归程（Kruskal重构树）
题目描述 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 n 个节点.m 条边的无向连通图(节点的编号从 1 至 n). 我们依次用 l,a 描述一条边的长度. ...
- （转）Tomcat文件详解
做web项目,最常用的服务器就是Apache的tomcat.虽然一直在用tomcat,但都是仅限在使用的阶段,一直没有深入学习过.想深入学习tomcat,首推的肯定是官网:http://tomcat. ...
- LAMP漫长编译安装
传说中的LAMP :Linux+Apache+MySQL+Python/Perl/PHP,Linux上安装方式:RPM和源码安装,源码安装要依赖包安装,可以定制安装 首先安装编译工具 yum inst ...
- dot-files/directories 点开头的文件或文件夹（windows/linux）
What's so special about directories whose names begin with a dot? 不管是 windows 系统,还是类 linux 系统,以点开头的文 ...
- 洛谷 P2430 严酷的训练
P2430 严酷的训练 题目背景 Lj的朋友WKY是一名神奇的少年,在同龄人之中有着极高的地位... 题目描述 他的老师老王对他的程序水平赞叹不已,于是下决心培养这名小子. 老王的训练方式很奇怪,他会 ...
- POJ 2886 Who Gets the Most Candies?(线段树·约瑟夫环)
题意 n个人顺时针围成一圈玩约瑟夫游戏 每一个人手上有一个数val[i] 開始第k个人出队 若val[k] < 0 下一个出队的为在剩余的人中向右数 -val[k]个人 val[k ...