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 完整表单验证实例的更多相关文章

  1. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  2. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  3. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  4. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  5. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  8. Bootstrap+PHP表单验证实例

    简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...

  9. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

随机推荐

  1. Android 用Socket实现PC和手机的文件传输

    PC服务器端代码: /* * PC与<a href="http://lib.csdn.net/base/android" class='replace_word' title ...

  2. 洛谷 P2067 Cytus-Holyknight

    P2067 Cytus-Holyknight 题目背景 本人最初作 以此纪念伟大的ios.安卓.PSV平台音乐游戏<cytus> 后续将不断更新. -------------Chapter ...

  3. 常见c#正则表达式类学习整理

    1.MatchCollection类 用于输入字符串所找到的成功匹配的集合,Regex.Matches 方法返回 MatchCollection 对象 用法 //str:要搜索匹配项的字符串 patt ...

  4. C# 反射具体解释

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第六篇：拦截器

    摘要      本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题      我们继续完善“MVC公告发布系统”, ...

  6. 算法中的优化问题（optimization problem）

    和多数算法不同的是,有些问题的答案不只一个,而是需要在多个答案中,按照一定标准选出"最佳"答案,这类问题就统称为"优化问题"(optimization prob ...

  7. JS学习笔记 - 透明度运动框

    该练习的笔记如下: 1.  var cur=0;  //先声明一个变量. 2.  parseInt会舍掉小数,而opacity值恰恰是小数,所以对于opacity,必须用parseFloat. cur ...

  8. SpringMVC响应Ajax请求（@Responsebody注解返回页面）

    项目需求描述:page1中的ajax请求Controller,Controller负责将service返回的数据填充到page2中,并将page2整个页面返回到page1中ajax的回调函数. 一句话 ...

  9. LA 3644 - X-Plosives ( 也即UVA 1160)

    LA看题 请点击:传送门 UVA 上也有这题 :UVA 1160 - X-Plosives 题目大意就是如果车上存在 k 个简单化合物,正好包含 k 种元素 ,那么它们将有危险,此时你应该拒绝装车. ...

  10. shell脚本一键安装mysql5.7.x

    使用脚本一键安装mysql5.7.x,初始化数据库.启动数据库---- mysql版本号:源代码mysql5.7.10 linux版本号:centos6.5 x86_64 #!/bin/bash GR ...