这几天看了锋利的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. odoo10学习笔记八：qweb引擎
			
    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189307.html 一:简介 QWeb是一个基于xml的模板引擎,用于生成HTML片段和页面,模板指令是 ...
    
			
    2. 
						
  2. 201871010133 赵永军《面向对象程序设计（java）》第六、七周学习总结
			
    201871010133 赵永军<面向对象程序设计(java)>第六.七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
    
			
    3. 
						
  3. zz：一个框架看懂优化算法之异同 SGD/AdaGrad/Adam
			
    首先定义:待优化参数:  ,目标函数: ,初始学习率 . 而后,开始进行迭代优化.在每个epoch  : 计算目标函数关于当前参数的梯度:  根据历史梯度计算一阶动量和二阶动量:, 计算当前时刻的下降 ...
    
			
    4. 
						
  4. Spark & Scala：
			
    https://blog.csdn.net/do_yourself_go_on/article/details/76033252 Spark源码之reduceByKey与GroupByKey      ...
    
			
    5. 
						
  5. springboot2.1+redis多数据源的配置
			
    springboot系列学习笔记全部文章请移步值博主专栏**: spring boot 2.X/spring cloud Greenwich.    由于是一系列文章,所以后面的文章可能会使用到前面文 ...
    
			
    6. 
						
  6. Git的回滚
			
    Git常用命令: git add .   #进行提交 git commit -m v2 #v2版本 cat index.html #查看文件内容已经变化 git log #获取到提交信息 git re ...
    
			
    7. 
						
  7. CF1168C And Reachability（DP）
			
    首先定义 $g[i][j]$ 表示 $i$ 前面(不包括 $i$)第一个第 $j$ 位是 $1$ 的数的位置.可以随便转移. 再定义 $f[i][j]$ 表示 $i$ 前面(包括 $i$)第一个第 $ ...
    
			
    8. 
						
  8. Log-Structured Merge Tree (LSM Tree)
			
    一种树,适合于写多读少的场景.主要是利用了延迟更新.批量写.顺序写磁盘(磁盘sequence access比random access快). 背景 回顾数据存储的两个“极端”发展方向 加快读:加索引( ...
    
			
    9. 
						
  9. Spring security  知识笔记【入门】
			
    一.生成spring boot项目文件 二.pom文件如下 <?xml version="1.0" encoding="UTF-8"?> <p ...
    
			
    10. 
						
  10. oracle--介质恢复和实例恢复的基本概念
			
    1.概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制.实际上REDO LOG的存在是为两种场景准备的,一种我们称之为实例恢复(INSTANCE RECOVERY),一种 ...
    
			
    11.