fangyong2006
- 浏览: 378902 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (269)
- FY_UML (3)
- FY_JAVA (12)
- FY_JavaScript脚本 (7)
- FY_JSP (3)
- FY_Tapestry框架 (12)
- FY_Spring框架 (3)
- FY_Manager (5)
- FY_Junit(单元测试) (3)
- SERVER (14)
- FY_Struts2框架 (3)
- FY_SVN (2)
- FY_NoSQL (2)
- FY_jquery_sir (13)
- FY_hibernate_sir (8)
- FY_设计模式_sir (6)
- FY_Extjs_sir (10)
- FY_CI_sir (5)
- FY_Oracle_sir (11)
- FY_MySql_sir (10)
- FY_Hadoop_sir (3)
- FY_SOA_sir (1)
- 中文分词技术 (1)
- FY_Android (52)
- FY_架构 (2)
- FY_PhoneGap (2)
- FY_Webstorm (5)
- FY_Sencha Touch (3)
- HTML5应用快速开发 (1)
- FY_python (0)
- HADOOP (1)
- AI (0)
最新评论
-
antao592：
楼主，HkDataSourceWrapper中的getCurr ...
结合spring jdbc 实现分表分库的数据库访问构思 -
bonait：
不错，看看我的这个怎么样www.zipin168.com
So Easy京东商城 -
chenzheng8975：
...
So Easy京东商城 -
yzhenxing：
我导入demo后少com.google.android.gms ...
google地图demo -
echoaiya：
非常感谢~~
google地图demo
自定义表单验证框架
/**
*
*/
var Tool = {};
Tool.onReady=function(handler){
window.onload=handler;
}
Tool.createSpan=function(style,msg){
return "<span class="+style+">"+msg+"</span>"
}
Tool.getEl=function(id){
return document.getElementById(id);
}
//为消息提供样式选择
Cls=function(){
this.input="inputsgl";
this.radio="";
this.check="";
this.textarea="";
this.select="";
this.defaultCls="onshow";
this.blurCls="";
this.focusCls="onfocus";
this.errorCls="onerror";
this.rightCls="oncorrect";
this.setClass=function(o,className){
o.className=this[className]
}
}
//此类定义了一些正则表达式
Reg=function(){
this.user=/^\w{6,12}$/;//用户名 一般是 6-12位
this.email=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//电子邮件
this.phone=/^\d{3}-\d{8}|\d{4}-\d{7}$/;//国内电话号码
//this.html=/^<(\S*?)[^>]*>.*?</\1>|<.*? />$/;
this.blank=/^$/;
this.postcode=/^[1-9]\d{5}(?!\d)$/;//邮编
this.card=/^\d{15}|\d{18}$/;//身份证号码
this.tinteger=/^[1-9]\d*$/;//正整数
this.tinteger=/^-[1-9]\d*$/;//负整数
}
//表单组件验证类
Fv=function(c){
this.config=c;
this.form; //设置当前注册的表单
this.cls= new Cls;//初使化消息样式
this.regexp=new Reg;//初使化正则表达式
//注册当前form表单对象
this.register=function(){
this.form=document.forms[c.form];
this.form.onsubmit=this.submit(c);//设置当前表单的提交监听函数
this.reg(this.config.fields);
}
setMsg=function(o,c,m){//设置消息方法，局部方法，当一个内部类来用
o.className=c;
o.innerText=m;
}
this.reg=function(cf){//注册表单,主要是将配置信息注册到表单中
if(cf.length<1) return;
var o,k;
for(var i=0;i<cf.length;i++){
k=cf[i];
o=this.form[k.name];
//添加默认表单组件信息
k.defaultMsg?this.addMsg(this.cls.defaultCls,k.defaultMsg,k.msgTip):"";
//添加得到焦点时的信息
k.focusMsg?this.addFocusListener(o,{cls:this.cls.focusCls,msg:k.focusMsg,tip:k.msgTip}):"";
//为组件添加失去焦点监听函数
this.addBlurListener(o,k);
}
}
//添加得到焦点事件 o 表单对象,m消息对象
this.addFocusListener=function(o,m){
var arr=(!o.length || o.nodeName=='SELECT')?[o]:o;
for(var i=0;i<arr.length;i++){
arr[i].onfocus=this.addEvMsg(m.cls,m.msg,m.tip);
}
}
//添加表单组件失去焦点
this.addBlurListener=function(o,k){
//var arr=o.length?o:[o];
var arr=(!o.length || o.nodeName=='SELECT')?[o]:o;
var t=this.getType(o);
for(var i=0;i<arr.length;i++){
arr[i].onblur=(this[t+"OnBlur"])(o,k);
}
}
//文本框推动焦点时触发的事件
this.textOnBlur=function(o,k){
var cl=this.cls.defaultCls;
var el=this.cls.errorCls;
var rl=this.cls.rightCls;
var t=Tool.getEl(k.msgTip);
var r=(typeof(k.regExp)=="string")?this.regexp[k.regExp]:k.regExp;
return function(){
var clazz,msg;
if(o.value==""){
clazz=cl;
msg=k.defaultMsg;
}else{
if(r && !r.test(o.value)){
clazz=el;
msg=k.errorMsg;
}else{
clazz=rl;
msg=k.rightMsg;
}
}
setMsg(t,clazz,msg);
}
}
//多选框失去焦点时触发的事件
this.checkOnBlur=function(o,k){
var dc=this.cls.defaultCls;
var rc=this.cls.rightCls;
return function(){
var cls=dc,msg=k.defaultMsg;
var tip=Tool.getEl(k.msgTip);
var c=0;
for(var j=0;j<o.length;j++){
if(o[j].checked){
c++;
if(c>=k.number){
cls=rc;
msg=k.rightMsg;
break;
}
}
}
setMsg(tip,cls,msg);
}
}
//单选框失去焦点时触发的事件
this.radioOnBlur=function(o,k){
var dc=this.cls.defualtCls;
var rc=this.cls.rightCls;
return function(){
var cls=dc,msg=k.defaultMsg;
var tip=Tool.getEl(k.msgTip);
for(var j=0;j<o.length;j++){
if(o[j].checked){
cls=rc;
msg=k.rightMsg;
break;
}
}
setMsg(tip,cls,msg);
}
}
//下拉列表失去焦点时触发的事件
this.selectOnBlur=function(o,k){
var dc=this.cls.defaultCls;
var rc=this.cls.rightCls;
return function(){
var cls=dc,msg=k.defaultMsg;
var tip=Tool.getEl(k.msgTip);
if(o.selectedIndex>0){
cls=rc;
msg=k.rightMsg;
}
setMsg(tip,cls,msg?msg:'');
}
}
this.submit=function(){//由于事件监听函数不能有参数,所以这里用一个闭包
var f=this.form;//f为this.form 的一个引用，当在闭包函数中的时候，this 指向的是window，而不是当前的那个对象了
var re=this.regexp;
var style=this.cls;
var config=this.config;
return function(){
var result=true;
var c,r,o,cla,msg,tip;
var vf=config.fields;
for(var i=0;i<vf.length;i++){//循环验证表单是否验证通过
c=vf[i];
o=f[c.name];
tip=Tool.getEl(c.msgTip);
var r=(typeof(c.regExp)=="string")?re[c.regExp]:c.regExp;
if(isPassed(o,c,r)){
cla=style.errorCls;
msg=c.errorMsg;
result=false;
setMsg(tip,cla,msg);
}
}
var r=config['submit']?(config['submit'])():true;
return result && r;
}
}
isPassed=function(o,c,r){//是否通过验证
var type=o.type || (o.length && o[0].type);
switch(type){
case 'text' :
case 'password'://判断文本控件，这样的控件是可以有正则表达式的
return (!c.allownull && !r.test(o.value)) || (c.allownull && o.value!='' && !r.test(o.value));
case 'radio':
return !(c.allownull || isChecked(o,1));
case 'checkbox':
return !(c.allownull || isChecked(o,c.number));
case 'select-one':
return !(c.allownull || o.selectedIndex>1);
default:
return true;
}
return false;
}
//判断选中个数是
isChecked=function(o,n){
var c=0;
for(var i=0;i<o.length;i++){
if(o[i].checked) c++;
}
return c>=n;
}
//判断下拉列表是否被选择了
isSelected=function(o,n){
var c=0;
for(var i=0;i<o.length;i++){
if(o[i].checked) c++;
}
return c>=n;
}
//失去焦点时显示的信息
this.onblurMsg=function(o,c){
var cl=this.cls.defaultCls;
var el=this.cls.errorCls;
var rl=this.cls.rightCls;
var t=Tool.getEl(c.msgTip);
var r=(typeof(c.regExp)=="string")?this.regexp[c.regExp]:c.regExp;
return function(){
var clazz,msg;
if(o.value==""){
clazz=cl;
msg=c.defaultMsg;
}else{
if(r && !r.test(o.value)){
clazz=el;
msg=c.errorMsg;
}else{
clazz=rl;
msg=c.rightMsg;
}
}
setMsg(t,clazz,msg);
}
}
this.addMsg=function(c,m,i){
var o = Tool.getEl(i);
o.className=c;
o.innerText=m;
}
this.addEvMsg=function(c,m,i){
return function(){
var s = Tool.getEl(i);
s.className=c;
s.innerText=m;
}
}
this.getType=function(o){
var type=o.type || (o.length && o[0].type);
switch(type){
case 'text' :
case 'password':
return "text";
case 'radio':
return "radio";
case 'checkbox':
return "check";
case 'select-one':
return "select";
default:
return '';
}
}
this.getEl=function(name){
return this.form[name];
}
this.addClass=function(f){
var cn=this.getType(f);
this.cls.setClass(f,cn);
}
}
调用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="css/validator.css" type="text/css"></link>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
<script type="text/javascript" src="Fv.js"></script></head>
<script type="text/javascript">
//var config=[{id:'username',isnull:true}];
function handler(){
alert("调用了自己的提交");
alert("就算验证通过我也不让表单提交，我返回一个false");
return false;
}
var config={form:"myform",submit:handler,
fields:[{name:'username',allownull:false,regExp:'user',defaultMsg:'用户名不能为空,6-12位,如:zhangsan',focusMsg:'请输入你的用户名',errorMsg:'用户名不能为空,且不能有非法字符',rightMsg:'用户名输入合法',msgTip:'usertip'},
{name:'pwd',allownull:false ,regExp:'user',defaultMsg:'密码不能为空,6-12位,如:******',focusMsg:'请输入你的密码',errorMsg:'密码不能为空,且不能有非法字符',rightMsg:'用户密码输入合法',msgTip:'pwdtip'},
{name:'email',allownull:true,regExp:/^\w{3,12}@\w{1,10}.\w{2,10}$/,defaultMsg:'电子邮箱如:kefu@sina.com',focusMsg:'请输入你的电子邮箱',errorMsg:'非法的电子邮箱帐号',rightMsg:'电子邮箱输入正确',msgTip:'emailtip'},
{name:'sex',allownull:false,defaultMsg:'请选择用户性别',focusMsg:'没有第三种性别可选了',errorMsg:'用户性别必须选择',rightMsg:'你确认这个性别的吗？',msgTip:'sextip'},
{name:'likes',allownull:false,number:2,defaultMsg:'请选择用户爱好',focusMsg:'认真选择你的爱好吧',errorMsg:'用户爱好必须选择两项',rightMsg:'这些都是不错的爱好!',msgTip:'likestip'},
{name:'age',allownull:false,defaultMsg:'请选择您的年龄',focusMsg:'年龄必须要选择',errorMsg:'你还没有选择你的年龄!',rightMsg:'年龄选择正确!',msgTip:'agetip'}
]}
Tool.onReady(function(){
var f = new Fv(config);
f.register();
});
</script>
<body>
<form action="" id="myform" id="myform" method="POST">
<center>
<table>
<tr><td>用 户 名:</td><td><input type="text" name="username" width=80/></td><td><span id="usertip"></span></td></tr>
<tr><td>密 码:</td><td><input type="text" name="pwd" width=80/></td><td><span id="pwdtip"></span></td></tr>
<tr><td>电子邮箱:</td><td><input type="text" name="email" width=80/></td><td><span id="emailtip"></span></td></tr>
<tr><td>性 别:</td><td><input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女</td><td><span id="sextip"></span></td></tr>
<tr><td>爱 好:</td><td><input type="checkbox" name="likes" value="体育" >体育 <input type="checkbox" name="likes" value="蓝球" >蓝球</td><td><span id="likestip"></span></td></tr>
<tr><td>年 龄:</td><td><select name="age"><option>请选择</option><option>18</option><option>20</option><option>19</option></select></td><td><span id="agetip"></span></td></tr>
<tr><td colspan=3 align="center"><input type="submit" value="提交表单"></td></tr>
</table>
</center>
</form>
</body>
</html>
- 自定义表单验证框架.rar (11.2 KB)
- 下载次数: 25
分享到：
发表评论
-
jquery插件开发
2010-08-20 18:03 896js代码 /************************ ... -
QQ相册
2010-08-18 15:27 1348Galleriffic-jquery图片画廊插件 插件 ... -
jquery_upload
2010-08-18 09:49 2712一、下载最新版的uploadi ... -
jquery_js_oop
2010-07-09 09:28 751/** * 定义函数的方式定义类 */ functi ... -
<<javascript+jquery书（源代码）>>
2010-07-08 20:52 489<<javascript+jquery（源代码）& ... -
jquery_demo
2010-07-08 19:17 863jquery_demo -
jquery_doc
2010-07-08 08:49 566JQuery_1.4.chm官方文档。。 -
第五章-JQUERY-Ajax
2010-07-07 21:41 791ajax 本章任务1. 获取异步数据 - 传统方法(14- ... -
第四章-JQUERY-功能函数
2010-07-07 21:38 805工具类 本章任务1. 浏览器的检测 - $.browser ... -
第三章-JQUERY-制作动画与特效
2010-07-07 21:35 980元素 本章任务1. 元素的显示与隐藏 - show()和h ... -
第二章-JQUERY-控制页面
2010-07-07 21:32 670本章任务 1. 标记的属性 - 获取属性的值(11-2.h ... -
第一章-JQUERY-基础
2010-07-07 21:27 720jQuery概述本章任务 http://jquery.com ...
相关推荐
jsf的初步使用（包括jsf框架的引入、用户登录、自定义表单验证、valueChangeEvent值变更事件处理做的级联下拉框）
这是目前国内开发的所有JS表单验证框架中最好的一个。理由如下：1、简单，只有一个JS文件，不需要其它相关JS支持。2集成AJAX验证支持。3、验证类型全面。4、极易扩展。 主要功能有： PISX通用表单验证具有以下一些...
表单验证框架，支持对 activity/Fragment 内的 TextView/EditText 进行规则验证 compile 'com.github.LongMaoC:validateui:v2.3' 部分效果图(demo在根目录下 ./apk/demo.apk) 更新内容 20171010 : 新增输入监听...
例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证（数据动态，规则动态） 去网络上搜索了一些框架，...
如首页所说，JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者...
简洁,快速的验证语法 无需编写验证提示信息(当然也支持自定义提示信息) 错误消息在指定地方显示 支持组合验证 Ajax支持 基于prototype.js 支持国际化 易于扩展 基于标准的Html属性...
下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。 1.使用x-input组件可知，官方只给了三种类型的is-type验证器，分别是：email,china-name,china-mobile，其他需要自己自定义验证器，怎么写验证器？ ...
除了使用Django内置表单，有时往往我们需要自定义表单。对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误“CSRF verification failed. Request aborted.” 本篇文章主要针对”表单提交”和”...
国外Validator框架写的JQ表单验证，里面的数据可以自定义，适合不是很精通JQ的朋友反编译，基本需要的表单条目都有了
超级容易扩展的android表单验证的小框架.比如，验证登陆模块的用户名和密码是否输入以及输入格式是否正确。验证内容自定义。 包含例子demo和使用说明doc
关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与async-validator。说明这个库的实用性还是比较高，可以多了解一下。 首先按照antDesign官网Demo。我们可以copy一个Form表单...
jquery表单验证插件Validform框架demo实例代码
JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要...
自定义实现类似struts框架，实现的功能有自动表单填充、表单验证、连接池、自定义分页标签。
简介：完全通过html不需要写JS验证程序就可以实现表单验证功能，可支持一个表单元件多条件验证， 同一页面多表单可同时使用，和服务端程序无关系，完全客户端方式。 Demo1 基本使用方法 Demo2 自定义错误信息显示...
本文实例讲述了Yii2框架自定义验证规则操作。分享给大家供大家参考，具体如下： 废话不多说直接上代码 class AbcModel extends Model { public $aaa; public $bbb; public $bbb; /** * 验证提交的form表单 * ...
validate.js是一款强大的纯javascript表单验证插件。该表单验证插件提供跨框架和跨语言的数据验证方式，验证条件可以写在JSON数据中，被服务器和客户端共享。它支持日期时间的验证，并提供自定义的验证接口。
SSH笔记-数据验证、上传下载、避免表单重复提交、自定义拦截器
在Struts2中验证真的比较容易，可以在Action中直接写validate，也可以使用validate框架进行验证，这个我觉得比Struts1.x方便了很多，但是有个问题一直困扰了我，直到现在有个小程序要用到这个方面的知识，那就是...