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- ...
随机推荐
- 带你一分钟理解闭包--js面向对象编程(转载他人)
什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...
- mysql 造1亿条记录的单表--大数据表
读写文件 背景及木:现有数据1000w单表,为压力测试准备1亿条数据. 步骤: 1.将1000w条记录,除id外都导入到多个文件中: //DELIMITER DROP PROCEDURE if EXI ...
- Mysql数据库的瓶颈处理一点建议
Mysql数据库的瓶颈处理一点建议 我们在使用Mysql数据库是常见的两个瓶颈是CPU和I/O的瓶颈,CPU在饱和的时候一般发生在数据装入内存或从磁盘上读取数据时候.磁盘I/O瓶颈的出 ...
- BZOJ3192: [JLOI2013]删除物品(splay)
Description 箱子再分配问题需要解决如下问题: (1)一共有N个物品,堆成M堆. (2)所有物品都是一样的,但是它们有不同的优先级. (3)你只能够移动某堆中位于顶端的物品. ( ...
- HUSTOJ 1072 小数背包问题
HUSTOJ 1072 小数背包问题 题目描述 有一个背包,背包容量是M(0<M≤500),有N(1<N≤1000)个物品,物品可以分割成任意大小. 要求尽可能让装入背包中的物品总价值最大 ...
- hdu5387 Clock
Problem Description Give a time.(hh:mm:ss).you should answer the angle between any two of the minute ...
- [TS] Implement a singly linked list in TypeScript
In a singly linked list each node in the list stores the contents of the node and a reference (or po ...
- 移动mm 话费支付接入过程（ane）
下面记录移动mm 话费支付接入的过程 1.强联网.弱联网差别.sdk是否有区分?用户体验部分由什么不同和差异? 差别在于强联网是网络通道(wifi/gprs/3g),弱联网是走短信通道,用户层面差异在 ...
- item-设置可见性
如果我们想要设置menu中item的可见行,有两种方式: 1.直接在menu的xml代码中设置 <menu> <item android:id="@+id/action_h ...
- hard-negative mining 及伪代码实现
Histogram of Oriented Gradients and Object Detection 获得 records 对于目标检测(object detection)问题,所谓的 hard- ...