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. Apache通用日志工具commons-logging和Log4j使用总结

    转自:https://blog.csdn.net/lzl13391522110/article/details/53758536 Apache通用日志工具commons-logging和Log4j使用 ...

  2. ps的入门

    ps的入门 http://www.cnblogs.com/qingci/archive/2012/09/20/2694728.html

  3. ubuntu14.04.32 vmware11开发环境搭建

    win7 64  vmware11 ubuntu14.04.32 在vmaware上安装ubuntu,自定义安装,选择区域为上海,这样数据源就会自动设置为中国,获取网络数据会较快,也可以安装完之后改变 ...

  4. Node里面的对象创建问题

    1.利用new Object()创建时 var a =new Object() a.b = 1 console.log(a) // 打印出来是[object Object] console.log(J ...

  5. BZOJ3510首都（LCT）

    Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...

  6. jsp+tomcat+ 创建project 配置project

    *如今我们已经下载到了 tomcat 7.0+ eclipse for java ee 直接解压,打开eclipse. 接下来是步骤: eclipse 打开的界面.空空如也 ! ..* 点击 file ...

  7. touch、touchevent-事件总结

    1.废话不多说,直接上代码,如下 package com.example.mygestrue; import android.support.v7.app.ActionBarActivity; imp ...

  8. 8.spring-boot配置log4j

    转自:https://www.cnblogs.com/qixing/p/7763582.html <dependency> <groupId>org.springframewo ...

  9. 5.decltype类型拷贝

    #include <iostream> using namespace std; template <class T> void show(T *p) { //初始化 decl ...

  10. Altium Designer如何统一调整标号大小,在pcb环境下