这几天看了锋利的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. SQL中的连接(极客时间)
			
    SQL中的连接 关系型数据库的核心之一就是连接, 而在不同的标准中, 连接的写法上可能有区别, 最为主要的两个SQL标准就是SQL92和SQL99了, 后面的数字表示的是标准提出的时间. SQL92中 ...
    
			
    2. 
						
  2. 微信支付：chooseWXPay:fail, the permission value is offline verifying
			
    在开发公众号微信支付的时候,到了支付那一步,页面上看到微信支付的loading一闪而过,但是没有出现微信支付的页面.控制台log显示错误信息:“chooseWXPay:fail, the permis ...
    
			
    3. 
						
  3. python简单日志处理
			
    简单日志处理 import datetime import re logfile='''58.61.164.141 - - [22/Feb/2010:09:51:46 +0800] "GET ...
    
			
    4. 
						
  4. XLNet原理探究
			
    1. 前言 XLNet原文链接是CMU与谷歌大脑提出的全新NLP模型,在20个任务上超过了BERT的表现,并在18个任务上取得了当前最佳效果,包括机器问答.自然语言推断.情感分析和文档排序. 这篇新论 ...
    
			
    5. 
						
  5. [原创]python爬虫之BeautifulSoup,爬取网页上所有图片标题并存储到本地文件
			
    from bs4 import BeautifulSoup import requests import re import os r = requests.get("https://re. ...
    
			
    6. 
						
  6. 【视频技术】EasyDarwin
			
    
			
    7. 
						
  7. NOIP 1999 导弹拦截
			
    洛谷 P1020 导弹拦截 https://www.luogu.org/problemnew/show/P1020 JDOJ 1411: [NOIP1999]拦截导弹 T1 https://neooj ...
    
			
    8. 
						
  8. Windbg Locals(局部变量)窗口的使用
			
    在WinDbg中,可以通过输入命令.使用“局部变量”窗口或使用“监视”窗口查看局部变量.局部变量窗口显示当前作用域中的本地变量的所有信息. 如何打开Locals窗口 通过菜单View--->Lo ...
    
			
    9. 
						
  9. django报错：django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module. Did you install mysqlclient?
			
    django 迁移数据库报错 django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.Did you ins ...
    
			
    10. 
						
  10. <BackTracking> dfs: 39 40
			
    39. Combination Sum Combination,组合问题用DFS罗列全部的答案. class Solution { public List<List<Integer> ...
    
			
    11.