Jquery validform

一、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

时间: 2024-10-07 09:39:20

Jquery validform的相关文章

Jquery Validform使用入门datatype参数详解

凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式.    如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,通过它可以满足你的任何需求.    可以绑定的附加属性有:datatype.nullmsg.sucmsg.errormsg.ignore.recheck.tip.altercss.ajaxurl 和 plugin 详细解释datatype: datatype    内置基本的da

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

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

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

官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8px; line-height:20px; height:20px; overflow:hidden; color:#999; font-size:12px; } .Validform_right{ color:#71b83d; padding-left:20px; background:url(im

VALIDFORM前端小插件实现表单验证;

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

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

10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub").Validform(),那么demo对象会有以下属性和方法可以调用: tipmsg[object] 如:demo.tipmsg.s="error! no messageinputed."; 通过该对象可以修改除 tit 以外的其他提示文字,这样可以实现同一个页面的不同表单使用不同的提示文字. 具体可修改的提示文字 $.Tipmsg={//默认提示文字; tit:

Validform

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.css&

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

面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也很方便.这篇文章就是针对我对validform的理解真理的一篇validform的使用文档.Validform官网 1.js和css的引用: 这里引用官网下载中的一下css: (文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的

jquery validate触发表单验证

jquery validate是常用的表单验证插件.遇到一个jquery validate表单验证不触发的问题 目前写法:$(function(){  $("#form").validate({     rules : {            themeColor: {                required : true            },            --        },        messages : {            themeCol

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

本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下面是一个完整的html页面代码,可以直接运行测试的. <html> <head><title>jQuery用面向对象的思想来编写验证表单的插件</title> <style type="text/css"> form {margi