validform 的ajax验证,Validform
#Validform
表单验证
插件核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码
兼容
IE6
用法
1、引入css
请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中 如下图
2、引入js (jquery 1.4.3 以上版本都可以)
3、给需要验证的表单元素绑定附加属性
这里的 Validform_checktip 是放在input框外的信息
4、初始化,就这么简单
$(function(){
//$(".demoform").Validform(); //就这一行代码!;
var demo=$(".demoform").Validform({
tiptype:4 // 显示提示信息
});
})
绑定附加属性说明
要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式。
如果还不能满足您的验证需求,可以传入自定义datatype
可以绑定的附加属性有:
datatype
nullmsg
sucmsg
errormsg
ignore
recheck
tip
altercss
ajaxurl
plugin
datatype
内置基本的datatype类型有
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
自定义datatype的名称,可以由字母、数字、下划线、中划线和号组成。
支持直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;
支持简单的逻辑运算 :
如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform.rjboy.cn$/",
这个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。
nullmsg
当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
如:nullmsg="请填写用户名!"
sucmsg
当表单元素通过验证时的提示信息,不绑定,默认提示"通过信息验证!"。
如:sucmsg="用户名还未被使用,可以注册!"
errormsg
输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。
如:errormsg="用户名必须是2到4位中文字符!"
ignore
绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,
没有填写内容时则会忽略对它的验证;
recheck
表单里面经常需要检查两次密码输入是否一致,recheck就是用来指定需要比较的另外一个表单元素。
如:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较。
tip
表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。它通常和altercss搭配使用。
如
altercss
它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上。
ajaxurl
指定ajax实时验证的后台文件的地址。
plugin
指定需要使用的插件。
对于日期、swfupload和密码强度检测这三个插件,绑定了plugin属性即可以初始化对应的插件
如,你要使用日期插件
只需在表单元素上绑定plugin="datepicker"就可以,初始化直接这样:
$(".demoform").Validform();
初始化参数说明
$(".demoform").Validform({
btnSubmit:"#btn_sub",
btnReset:".btn_reset",
tiptype:1,
ignoreHidden:false,
dragonfly:false,
tipSweep:true,
label:".label",
showAllError:false,
postonce:true,
ajaxPost:true,
datatype:{
"*6-20": /^[^\s]{6,20}$/,
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,obj为当前表单元素,curform为当前验证的表单,regxp为内置的一些正则表达式的引用;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){return true;}
if(reg2.test(gets)){return true;}
return false;
//注意return可以返回true 或 false 或 字符串文字,true表示验证通过,返回字符串表示验证失败,字符串作为错误提示显示,返回false则用errmsg或默认的错误提示;
},
"phone":function(){
// 5.0 版本之后,要实现二选一的验证效果,datatype 的名称 不 需要以 "option_" 开头;
}
},
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
},
beforeCheck:function(curform){
//在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
//这里明确return false的话将不会继续执行验证操作;
},
beforeSubmit:function(curform){
//在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
//这里明确return false的话表单将不会提交;
},
callback:function(data){
//返回数据data是json对象,{"info":"demo info","status":"y"}
//info: 输出提示信息;
//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
//ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
//这里执行回调操作;
//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
datatype
传入自定义datatype类型,可以是正则,也可以是函数。
datatyp:{
"zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"phone":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,
//obj为当前表单元素,
//curform为当前验证的表单,
//regxp为内置的一些正则表达式的引用。
//return false表示验证出错,没有return或者return true表示验证通过。
}
}
validform 的ajax验证,Validform相关推荐
- validform 的ajax验证,表单验证插件Validform使用笔记
Validform是一款很强大的表单验证插件,号称一行代码搞定整站的表单验证!javascript 实际使用感受还不错,比jquery-validate简单易用.html 一.应用Validform, ...
- 带头像、邮箱提醒、ajax验证的form表单
页面是简单用个table拼出来的.包含以下功能: 1.表单验证 2.邮箱提醒 3.更换头像 4.ajax验证(没有生成验证码的jar包,就只用身份证写了个ajax验证展示,没有具体去验身份证) 在使用 ...
- Validform表单验证框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活. 这里使用该框架的版本号为: Validform_v5.3.2 官网:http://validform.rjboy.c ...
- 13个AJAX验证框架
前言: 众所周知,验证,最好是在客户端尽量解决,以降低服务端资源开销:在目前AJAX流行的今天,基于AJAX的验证更能够为客户端验证提供丰富的机制和美观的交互效果.本文收集了13个比较通用的AJAX验 ...
- PHP生成各种验证码和Ajax验证
转载链接:http://www.helloweba.com/view-blog-191.html 验证码在WEB应用中非常重要,通常用来防止用户恶意提交表单,如恶意注册和登录.论坛恶意灌水等.本文将通 ...
- 利用jQuery实现的Ajax 验证用户名是否存在
异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...
- jeecg 输入框属性 自定义ajax 验证字段值是否存在
jsp <div class="form"><label class="Validform_label">选项编号: </labe ...
- YIi 设置 ajax 验证
开启 ajax 验证 view 层 <?php $form = $this->beginWidget('CActiveForm', array('id'=>'user-form',' ...
- asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码,1, 使用JavaScript js文件,验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { va ...
最新文章
- 《深入理解Spark:核心思想与源码分析》——第1章环境准备
- C语言基本入门 - 1
- MySQL查询优化之explain的深入解析
- Java当中捕获异常
- MPC实现自动驾驶轨迹跟踪
- linux路由内核实现分析(二)---FIB相关数据结构(2)
- python怎么和数据库连接_Java和Python都怎么连接数据库
- 原生js双向数据绑定
- Scrapy爬虫框架第五讲(linux环境)【download middleware用法】
- matlab画动态简单轨迹,MATLAB中绘制质点轨迹动图并保存成GIF
- 海外旅游最常用的100句英语口语
- 基于Java后台(Springboot框架)+前端小程序(MINA框架)+Mysql数据库的在线电子书阅读小程序系统设计与实现
- c语言程序从哪里开始执行
- 打造现代应用的利器,VMware Tanzu显露王者风范 (1)
- 面试大全 | C语言高级部分总结
- Markdown优雅地插入图片
- Phpstorm调试详解(包含命令行以及浏览器)
- 想要提升工作效率,教你一招事半功倍
- 正则校验特殊字符,英文特殊字符和中文特殊字符
- 系统工程与开放自动化系统
热门文章
- 软件的国际化、Jstl国际化标签
- spice整体框架理解
- 基于车载无线通信和车辆远程传感器融合的V2X协同感知(目标跟踪/轨迹预测)
- 我的python学习之路_我的Python入门之路
- Flask-SQLAlchemy
- CN華少在此祝各位小伙伴们元宵节,感谢关注
- 移动端App开发流程管理
- 中国水产饲料行业市场供需与战略研究报告
- 计算机英语第二版司爱侠翻译,计算机英语 第2版 配套习题 司爱侠 张强华 参考试卷.pdf...
- JSP住宅小区物业管理系统(源代码+开题报告+论文+答辩PPT)科大云炬