这几天看了锋利的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. bert剪枝系列——Are Sixteen Heads Really Better than One?
			
    1,概述 剪枝可以分为两种:一种是无序的剪枝,比如将权重中一些值置为0,这种也称为稀疏化,在实际的应用上这种剪枝基本没有意义,因为它只能压缩模型的大小,但很多时候做不到模型推断加速,而在当今的移动设备 ...
    
			
    2. 
						
  2. qt需求
			
    1.登录框 账号密码 复杂度判断 2.监控  权限认证 (5分钟必须锁定,退回登录状态)--b/s 3.exe 嵌入exe (什么时间触发了什么消息,任何消息触发都可以,日志文件zlog,5分钟没有写 ...
    
			
    3. 
						
  3. github配置密钥
			
    我们在githob创建项目后,本地使用git 克隆代码 需要在githob配置密钥,才可以 步骤: 下载git,进行安装,安装好后.点击桌面,右键,选择>>git  bash 在弹出的黑框 ...
    
			
    4. 
						
  4. DNS解析过程--笔试答题版
			
    在运维笔试的时候,回答DNS解析的过程,不能写一大堆,一是不美观,二是浪费时间,应该怎么写呢?我觉得这样写比较好. 1.客户端:chche----hosts 2.DNS服务器:cache---递归-- ...
    
			
    5. 
						
  5. 201871010118-唐敬博《面向对象程序设计（java）》第十三周学习总结
			
    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
    
			
    6. 
						
  6. 04-人脸识别-triplets loss 的解释（转载）
			
    转载至: https://blog.csdn.net/tangwei2014/article/details/46788025 下面是内容: [前言] 最近,learning to rank 的思想逐 ...
    
			
    7. 
						
  7. 重新学习SpringMVC——补充
			
    56. SpringMVC_源码解析57. SpringMVC_Spring整合SpringMVC_提出问题58. SpringMVC_Spring整合SpringMVC_解决方案59. Spring ...
    
			
    8. 
						
  8. Kettle Unable to get list of element types for namespace 'pentaho'
			
    我把公司的kettle5.0升级到7.0之后遇到了这个问题,困扰了很久,百度谷歌都查不到结果,所以只能自己查找原因. 由于已经被搞好了,现在无法截图了,总之就是下面这行报错,遇到这个错误的同学估计也不 ...
    
			
    9. 
						
  9. Centos7将本地源更换为网易源
			
    百度搜索: 网易源  点击进入网易开源镜像站 1. 备份当前 repo 文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS- ...
    
			
    10. 
						
  10. [LeetCode] 221. Maximal Square 最大正方形
			
    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...
    
			
    11.