这几天看了锋利的jquery，感觉很不错。特别是jquery强大的选择器。今天就利用jquery写了一个自己的form表单验证的小案例。当巩固下jquery。首先贴下代码，当然只是一个小案例。

思路：

  1、<input type="text" Validate="Date" id="date"/>这里的 Validate：是我们需要验证的类型（属于日期类型），这里你也可以自己定义。id属性就不用说了。<input type="text" Validate="NotStringNull" id="notstring"/>

2、var arrayInput = jQuery('#FormData input');//获取from表单的input标签 这样就可以找到form表单下所有的input标签

3、遍历改数组，获取 Validate 属性值，看是否需要验证，在这里我用的是case匹配

4、用正则表达式来判断或其他方来校验改值是否合法
5、用 array 来存放结果和对应元素的ID
6、遍历array 数组，如果判断为false值，那么就把对应颜色的设置对应颜色的css值，提示用户。
7、返回验证的结果




　　　　






<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery/jquery.min.js"></script>

    <script type="text/javascript">

        jQuery(function () {

            jQuery('button').click(function () {

                var arrayInput = jQuery('#FormData input');//获取from表单的input标签

                var isValidate = Validate(arrayInput);

                if (isValidate)//如果通过则可以发生ajax请求，提交数据到后台

                    jQuery('#result').text('验证通过');

                else

                    jQuery('#result').text('验证未通过');

            });

        });

        //表单验证函数

        var Validate = function (arrayInput) {

            //将结果和对应的ID放入该数组

            var array = new Array();

            //循环遍历需要验证的input元素

            arrayInput.each(function (index, element) {

                var type = jQuery(element).attr('Validate');

                //获取验证的类型 比如日期、不为空的字符串

                var Value = jQuery(element).val();

                var obj = new Object();

                switch (type) {

                    //如果是日期验证

                    case 'Date':

                        var reg = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;

                        if (!reg.test(Value)) {

                            obj.id = jQuery(element).attr('id');

                            obj.isval = false;

                        } else {

                            obj.id = jQuery(element).attr('id');

                            obj.isval = true;

                        }

                        array.push(obj);

                        break;

                        //如果是不为空的字符串验证

                    case 'NotStringNull':

                        if (Value == "" || Value.length == 0 || Value == null) {

                            obj.id = jQuery(element).attr('id');

                            obj.isval = false;

                        } else {

                            obj.id = jQuery(element).attr('id');

                            obj.isval = true;

                        }

                        array.push(obj);

                        break;

                }

            })

            var isbool = true;//返回结果初始值设为true

            //循环遍历结果

            for (var i = 0; i < array.length; i++) {

                if (array[i].isval == false) {

                    //验证不通过，则改变元素的css样式

                    jQuery('#' + jQuery(array[i]).attr('id')).css('background', 'red');

                    isbool = false;

                }

            }

            //返回验证结果

            return isbool;

        }

    </script>

</head>

<body>

    <button value="验证" id="dd">验证</button>

   <form id="FormData">

       <!--验证日期-->

       日期验证:<input type="text" Validate="Date" id="date"/><br />

       日期验证:<input type="text" Validate="Date" id="date2"/><br />

       <!--验证不为空的字符串-->

       不为空字符串验证:<input type="text" Validate="NotStringNull" id="notstring"/><br />

       <!--不需要最验证-->

       <input type="text" />

       <span id="result"></span>

   </form>

</body>

</html>





如图：


验证结果为 false




验证结果为 false




验证结果为 true


												


											
用jquery写自己的form表单验证的更多相关文章
	

    
								
  1. jquery实现ajax提交form表单的方法总结
		
    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...
    
		
    2. 
						
  2. 基于Bootstrap+jQuery.validate Form表单验证实践
		
    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...
    
		
    3. 
						
  3. python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）
		
    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...
    
		
    4. 
						
  4. Bootstrap学习总结笔记（24）-- 基于BootstrapValidator的Form表单验证
		
    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证 ...
    
		
    5. 
						
  5. Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）
		
    一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5  ...
    
		
    6. 
						
  6. web框架-（六）Django补充---form表单验证
		
    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...
    
		
    7. 
						
  7. django之form表单验证
		
    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...
    
		
    8. 
						
  8. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
		
    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
    
		
    9. 
						
  9. [php基础]PHP Form表单验证:PHP form validator使用说明
		
    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. poi操作Word创建超链接
			
    项目引入poi: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</ ...
    
			
    2. 
						
  2. shell 多行重定向方法（多重嵌套）
			
    这里讲的是多重嵌套.没用过 EOF的朋友请参考其他基础贴 在自动化运维中,常常需要shell脚本.在自动化创建脚本时,会遇到脚本内容里有用EOF重定向到配置文件的代码. 这样就不能用EOF来创建脚本了 ...
    
			
    3. 
						
  3. 素数、杨辉三角、封装结构和集合操作（15）——IPython使用和封装解构
			
    IPython使用 帮助 ? ##Ipython的概述和简介 help(name) ##查询指定名称和帮助 obj? ##列出obj对象的详细信息 obj?? ##列出更详细的信息 特殊变量 _表示前 ...
    
			
    4. 
						
  4. UE4 C++中出现的让人手足无措的问题（持续更新）
			
    最近开始涉入UE4更深层的一面——UE4 C++,由于其中的体系和在课本或者是网课上那么说的C++体系有一些误差(准确说就是遵循的C++标准不同),导致学习与运用起来有些吃力,所以作此总结,为自己的开 ...
    
			
    5. 
						
  5. 理解serialVersionUID是什么？有什么用？如何生成？
			
    如果您曾经实现过Serializable接口,则必须遇到此警告消息 The serializable class xxx does not declare a static final serialV ...
    
			
    6. 
						
  6. C#基础操作符详解（下）
			
    书接上文的基本操作符,下文介绍的是其他操作符: 4.2一元操作符: 只要有一个操作数跟在它后面就可以构成表达式,也叫单目操作符. ①&x和*x操作符(很少见有印象即可): 这两个操作符同样也需 ...
    
			
    7. 
						
  7. volatile关键字及Java内存模式
			
    参考文档:https://www.cnblogs.com/_popc/p/6096517.html volatile关键字虽然从字面上理解起来比较简单,但是要用好不是一件容易的事情.它与Java的内存 ...
    
			
    8. 
						
  8. djang小项目过程中的小问题 02（跳转界面）
			
    我觉着自己生下来就是解决问题的 ##1. 今天在使用登录注册模板时,输入后缀index,正常显示登录界面,但是点击 立即注册 之后不会跳转到注册页面 因为我观察到后缀名发生变化了,但是出发点是错的,前 ...
    
			
    9. 
						
  9. 2019 AI 100 Startups
			
    
			
    10. 
						
  10. linux pkgsrc 学习（一） 安装pkgsrc
			
    使用pkgsrc.joyent.com 提供的linux 包 下载包 # # Copy and paste the lines below to install the 64-bit EL 7.x s ...
    
			
    11.