一、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;
                         }, 
 

Jquery validform的更多相关文章

  1. 【jquery】Validform,一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. 基于jquery的表单校验插件 - rjboy的Validform使用体验

    官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8p ...

  3. JavaScript/Jquery:Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  4. Validform使用ajax详解

    demo.config({    showAllError:true,    url:"这里指定提交地址",    ajaxpost:{        //可以传入$.ajax() ...

  5. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  6. Validform 学习笔记---代码练习

    上一节主要梳理了validform的基础知识,针对这些基础知识,编写代码的时候,也整理的部分知识,先记录以便后期温习. 验证部分的css @charset "utf-8"; /* ...

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

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

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

    一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在 ...

  9. 表单校验组件ValidForm

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

随机推荐

  1. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  2. Codeforces Round #451 & Codeforces Round #452

    Rounding Solution Proper Nutrition 枚举 Solution Phone Numbers 模拟 Solution Alarm Clock 贪心,好像不用线段树也可以,事 ...

  3. php多线程操作数据库(转)

    PHP用pcntl可以实现多线程操作数据库.直接上代码,逻辑自己研究喽. 示例代码为: /** * 并发多线程运行任务,把任务拆解成区块,用多线程去并发执行 * @param callable $ex ...

  4. Postfix Self Expression

    Postfix Self Expression A postfix self expression consists of an expression or the name of a type, i ...

  5. Embeding如何理解?

    参考: http://www.sohu.com/a/206922947_390227 https://zhuanlan.zhihu.com/p/27830489 https://www.jianshu ...

  6. elasticsearch聚合函数

    计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": {  //聚合 "group_by_tags": ...

  7. nginx强制使用https访问(多站点多域名配置)

    很多配置过https模板的人都知道,配置https 时 ,站在用户的角度http 和https 的区别根本不清楚.有时候敲 http 时会出现 404 错误,而实际上我们是https. 有朋友找我配置 ...

  8. C++基础 (10) 第十天 C++中类型转换 异常 栈解旋 io操作

    1之前内容的回顾 C语言中的类型转换(int)a  强转可读性太差了 C++把()拆分成了四种转换方式 static_cast static_cast在编译器编译阶段就进行转换了 2.dynamic_ ...

  9. 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

    // 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...

  10. reMarkable安装教程

    PS :每次都下一遍安装包挺无奈的...... 系统版本 :Ubuntu 16.04 安装包 :remarkable_1.87_all.deb 链接 Here!-> reMarkable 安装步 ...