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. Vue的学习--遇到的一些问题和解决方法

    包括: 1.Missing space before function parentheses 2.如何给.vue文件的页面添加css 3.如何给.vue文件页面里的元素添加监听器 4.如何为每一个页 ...

  2. Spark源代码分析之中的一个：Job提交执行总流程概述

    Spark是一个基于内存的分布式计算框架.执行在其上的应用程序,依照Action被划分为一个个Job.而Job提交执行的总流程.大致分为两个阶段: 1.Stage划分与提交 (1)Job依照RDD之间 ...

  3. javaScript实现选中文字提示新浪微博分享的效果

    <!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <me ...

  4. 1.2 Use Cases中 Messaging官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 下面是一些关于Apache kafka 流行的使用场景.这些领域的概述,可查看博客文 ...

  5. java 文件读写--转载

    读文件 http://www.baeldung.com/java-read-file Java – Read from File 1. Overview In this tutorial we’ll ...

  6. Android内存泄露分析之StrictMode

    转载请注明地址:http://blog.csdn.NET/yincheng886337/article/details/50524709 StrictMode(严格模式)使用 StrictMode严格 ...

  7. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax

    摘要      本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证.而后,将分别结合ASP. ...

  8. Could not find action or result: There is no Action mapped for namespace [/] and action name [GetG

    Could not find action or result: /car/GetGpsDataAction  There is no Action mapped for namespace [/] ...

  9. less相关知识点

    less是一门css预处理语言,文件后缀名为.less,能减少css文件编写的代码量 官网 http://lesscss.cn/#using-less 安装 使用npm install -g less ...

  10. 在 Windows 10 x64 上安装及使用 ab 工具的流程

    本文转自:www.shuijingwanwq.com/2017/04/18/1568/ 1.基于AB测试工具进行高并发情形下的模拟测试,打开:http://httpd.apache.org/docs/ ...