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. DG Cascade Standby

    SUMMARY 1. logical standby不支持cascading standby 2. 11.2.0.2之前版本cascading standby不支持RAC 3. 11.2.0.3之前版 ...

  2. C# 中 int、Convert.ToInt32（）、int.Parse()的区别

    int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; Conver ...

  3. 界面实例--旋转的3d立方体

    好吧,这里直接编辑源码并不允许设置css和js……毕竟会有危险……那直接放代码吧 <!DOCTYPE html> <html> <head> <meta ch ...

  4. SSO单点登录学习总结（2）——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...

  5. [D3JS] Add more map layer and color

    import React, {Component} from 'react'; import * as d3 from 'd3'; import 'd3-geo'; import * as topoj ...

  6. Linux系列-安装经常使用软件

    安装JDK: 理论篇: 一.下载JDK 二.安装 ①复制到/usr/java/路径下 [plain] view plaincopy #mkdir /usr/java/ #cp jdk-7u25-lin ...

  7. Google 免费公共 DNS 服务器

    Google 免费公共 DNS 服务器 http://googleblog.blogspot.com/2009/12/introducing-google-public-dns.html DNS 8. ...

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

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

  9. Flask项目之手机端租房网站的实战开发（六）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  10. PatentTips - Method for guest operating system integrity validation

    BACKGROUND The embodiments relate to guest operating system integrity validation, and more particula ...