一、validform是什么？
           validform是一款智能的表单验证js插件，它是基于jQuery库与css,我们只需要把表单对象放入，
            就可以对整个表单数据进行验证，而不需要每次验证都要写个js脚本。
 
        
 
二、validform优点
            1. 自定义你想要的信息提示效果 （弹窗提示 ----  右侧提示）                 
            2. 智能的错误信息提示 
                
           3. 可以指定需要验证的和不需要验证的区域
                    例如
                            ignore
                                    绑定了ignore="ignore"的表单元素，在有输入时， 会验证所填数据是否符合datatype所指定数据类型，
                                    没有填写内容时则会忽略对它的验证；
           4. 基于form对象操作 

        5.validform与js脚本的区别
                                validform是对js进行了封装
                       js脚本验证字符串类型：6到18位字符串 ：   /^[\u4E00-\u9FA5\w\.\s]{6,18}$/ 
                                                还要if进行判断，使用起来非常麻烦
                       而validform 直接在需要验证的input框中使用 datatype="s6-18"
 
 
 
 
 

<!--引入css  -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/validform/css/style.css" type="text/css" media="all" />
<!-- 引入jquery -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.7.js"></script>
<!--引入validform  -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/validform/validform-js/Validform_v5.3.2(1)/Validform_v5.3.2_ncr_min.js"></script>
 
 
            初始化：
    $(function(){
                                var demo=$(".demoform").Validform({
                                 });
                           })

三、使用步骤
            1、引入css,js
            2、定义载体
            3、初始化                
                 
    

datatype
           

  传入自定义datatype类型，可以是正则，也可以是函数


            *：检测是否有输入，可以输入任何字符，不留空即可通过验证；
            *6-16：检测是否为6到16位任意字符；
            n：数字类型；
            n6-16：6到16位数字；
            s：字符串类型；
            s6-18：6到18位字符串；
            p：验证是否为邮政编码；
            m：手机号码格式；
            e：email格式；
            url：验证字符串是否为网址。
            中文需要自己定义

            <input datatype="n2-6">
 
 
datatype函数（初始化参数）

          

           

 如果数据类型与底层封装的数据类型相同 那么我们自定义的优先级大于底层封装
            datatype:{
                       "m":/^[1][1,3,5,8,4]\d{9}$/,    
                        "china2-6":/^[\u4e00-\u9fa5]{2,6}$/,    
              }


 
nullmsg （null提示）
            当表单元素值为空时的提示信息，不绑定，默认提示"请填入信息！"。
            如：nullmsg="请填写用户名！"
            <input datatype="n2-6" nullmsg="请填写密码">
 
errormsg（错误提示）
            输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。
            如：errormsg="用户名必须是2到4位中文字符！"
             <input datatype="n2-6" errormsg="请填写2-6位数字密码">


 
 

recheck（二次验证，保证输入的一致性）

        常用于：确认密码

               recheck就是用来指定需要比较的另外一个表单元素。
 如：密码文本中name="pw" 那么我们确认密码文本中绑定上 recheck="密码文本中name的值"                
                密码<input datatype="n2-6" name="pw" errormsg="请输入2-6位数字" nullmsg="请填写密码">
                确认密码<input datatype="n2-6" recheck="pw" errormsg="俩次密码不一致" nullmsg="请填写密码1">

               
 
tiptype（初始化参数）
                可以为1、2 、3、4和 自定义函数。1 表示弹出提示框，是默认值（

使用1和3就够了

）

                1=> 自定义弹出框提示；

（常用）


                2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；

                                    （该元素的父节点的下一个节点中显示）没什么卵用
                3=> 侧边提示(会在当前元素的siblings（相邻）对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
                                   （该元素的相邻元素）（常用）
                4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
                                   （该元素的父节点的下一个节点中显示）

没什么卵用

                                                
 
 
 
label（html中的<label>）
                意思就是聚焦 将label中所有的内容聚焦在一起作为一个整体
 
 
tip   

            表单里经常有些文本框需要默认就显示一个灰色的提示文字，当获得焦点时提示文字消失，失去焦点时提示文字显示。
            tip属性就是用来实现这个效果。它和altercss搭配使用。
             如<input type="text" value="默认提示文字" tip="默认提示文字" altercss="任意写" />
                    value与tip的值必须是相同的
 
altercss   

           它需要和tip属性配合使用，altercss指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。

btnSubmit（提交）（初始化参数）

指定当前表单下的哪一个按钮触发表单提交事件，如果表单下有submit按钮时可以省略该参数。

                如：

btnSubmit:"#sub"

  

是该表单下要绑定点击提交表单事件的按钮；


btnReset（重置）（初始化参数）
                 如：btnReset:"#res"是该表单下要绑定点击重置表单事件的按钮;
 
 

ajaxurl：（进行实时验证）

        使用 ajaxurl 时首先会对我们定义的datatype进行验证，只有验证通过后才会请求方法数据。

           前台到后台：

                        前台：

                                在需验证的文本中绑定 ajaxurl 属性 后跟上路径，当我们失去光标时会直接请求我们定义的方法

                        后台：

                          

    ajaxurl指定的方法可以接收到Post方式传过来的两个值，后台接收分别是param和name（后台定义的属性驱动），param是该元素的值.

name是该元素的name属性值。（可忽略）

后台往前台：

后台：

使用ajaxurl后台往前台传值须是含有status（状态） info（提示信息）值的json数据！

status的值 成功为小写字母 "y" 失败为小写字母 "n" （不然样式会出错）

前台会自动识别

 <input type="text" ajaxurl="validformAction!toValidform.action" name="valid.ename" datatype="china">

beforeSubmit()（初始化参数）
          函数内可以调用js 进行判断等等
                在表单验证通过，提交表单数据之前执行的函数
                函数return false的话表单将不会提交;
                    如：
                                beforeSubmit:function(){
                                insertEmpInfo();//调用增加方法（ajax）
                                //return false;
                         }, 
转 http://www.cnblogs.com/dengheng/p/5798938.html

转载于:https://www.cnblogs.com/moy-1313133/p/6892072.html

Jquery validform相关推荐

  1. validForm结合layer制作表单验证提示

    首先要引入jquery,Validform和layer <script src="../js/jquery.min.js"></script> <sc ...

  2. Validform 学习笔记---基础知识整理

    面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也 ...

  3. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  4. 利用jquery操作ajax,利用jquery对ajax操作，详解原理（附代码）

    1.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector ...

  5. Validform实时表单验证插件实例使用

    文档日期:2016-10-17 适用范围:所有类型网站表单验证 插件版本:v5.3.2 插件地址:http://validform.rjboy.cn/Validform/v5.3.2/Validfor ...

  6. 开发指南专题十：JEECG微云快速开发平台--表单校验组件ValidForm

    开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...

  7. 开发指南专题九：JEECG微云快速开发平台-表单校验组件ValidForm

    开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Valid ...

  8. 表单验证之validform.js使用方法

    Validform使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Va ...

  9. jQuery Validate详解

    一.常见的表单验证插件 在项目开发过程中,我们需要对前台输入的一些数据进行校验,以到我我们要求的格式,这就难免要写很多正则表单式来进行判断,这是一件很费时的时,所有就出现了了一些表单验证框架,以下几种 ...

最新文章

  1. 使用Powershell如何导出Exchange对象中的多值属性值
  2. winpcap4.1.2手动清理关键
  3. matlab 极坐标作图polar
  4. 利用Lucene.net搜索引擎进行多条件搜索的做法
  5. ITK:将图像粘贴到另一个
  6. 英特尔的VT-x技术是什么?
  7. 阅读openjdk源代码
  8. 韩顺平mysql优化笔记_韩顺平 mysql优化笔记.doc
  9. 图的深度优先遍历和广度优先遍历（附例题）
  10. 人狠话不多，细说大牛直播SDK之RTMP播放器和RTSP播放器
  11. GPS从入门到放弃（十九） --- 精密星历
  12. matlab直方图匹配,直方图匹配 histogram match
  13. 杜利特尔分解法Doolittle(LU分解法)_解线性方程组的直接解法
  14. 用js代码简单的介绍自己
  15. 2021 An Updated Comparison of Four Low Earth Orbit Satellite Constellation Systems to Provide Global
  16. 温州又一知名企业宣布倒闭破产
  17. Kafka系统介绍及高性能原理
  18. printf 输出多行字符串
  19. Java继承的综合案例——群主发红包
  20. 关于B2C电子商务顾客忠诚度影响因素的问卷调查

热门文章

  1. ceph 运维操作-RADOS
  2. Android - ViewPager2
  3. JSP[jsp文件]
  4. 这个男人让你的python爬虫开发效率提升8倍
  5. DELL技术支持电话及网站列表
  6. BZOJ1492【NOI2007】货币兑换
  7. pyhton-字符串对象的函数
  8. 用python画微笑脸表情_用Python识别人脸，表情，性别，颜值，人种...
  9. 用python实现BMI的计算
  10. ffmpeg解码降低延迟记录