Skygq表单应验ajax无刷新表单提交详解(jquery)

2012-11-07

Skygq表单验证ajax无刷新表单提交详解(jquery)??在线DEMO看过了，大家是不是觉得挺不错的呢~~呵呵~~觉得不

Skygq表单验证ajax无刷新表单提交详解(jquery)

?

在线DEMO看过了，大家是不是觉得挺不错的呢~~呵呵~~觉得不错的就接着看下去吧~下面来说这个插件的新用法吧：

使用插件前的准备工作
在使用Skygq表单验证和ajax无刷新表单提交合体版1.2插件之前，您必须在您的网页head里面加入如下代码：
最新的Jquery1.4.4版本，本插件是适合运行在jquery1.3.2及以上版本，如果您的网页已经有了jquery文件，那么不必加入下面的代码

参数描述 (1.2版)默认值items1表单项数组(Json方式)必须得有这个参数，不然这个插件就没意义了！无isAlert表单项验证时，正确或者错误的提示方式，如果是为true的话，那么错误或者正确的提示则会弹出alert对话框falseisAjaxSubmit是否进行ajax无刷新提交falsesuccess进行ajax无刷新提交时，当请求成功后的回调函数。这个参数必须在isAjaxSubmit参数设置为true的时候，才会起作用$.noop（jquery中的空的函数）isBg进行ajax无刷新提交时是否出现遮罩层已经ajax loading图片，这个参数也必须是在isAjaxSubmit参数设置为true的时候，才会起作用trueclearForm进行ajax无刷新提交时，当请求成功后是否将表单域中的数据清空truerootskygqCheckAjaxForm插件的路径默认情况下，不需要您自己设置。插件会自动生成ajaxImageajax loading的图片地址。默认情况下，您也不需要自己设置。除非您觉得插件自带的ajax loading图片不好看！urlajax提交的地址此项覆盖form的‘action’属性，如果form的action属性也没有设置，那么这个url就会是当前的地址typeajax提交的方式’get’或者’post’此项会覆盖form表单的’method’属性,如果这里不设定而且form的method属性也不设定这个值的话，默认为’get’dataTypeajax提交之后，返回的数据类型可以为’html’,'xml’,'script’,或者’json’默认为‘html’

接下来说说items(表单项数组Json方式)中的一些参数设置和意义

参数意义name表单域的name属性type验证规则:
eng : 英文半角字母
chn : 中文汉字
mail: 邮箱
url : 网址
currency: 货币
number: 数字
int : 整数
double: 浮点数
username: 数字和英文及下划线和.的组合，开头为字母，4-20个字符
password: 数字和英文及下划线的组合，6-20个字符
safe: 不允许特殊字符（比如!@#’”等等）
dbc : 全角字符（汉字除外）
qq : QQ号码
date: 日期
telephone：手机号码
zipcode：邮编
bodycard：身份证，支持15位、18位，x字母
ip ：IP地址
以下类型需要有匹配对象或值
eq : 等于
gt : 大于
gte : 大于等于
lt : 小于
lte : 小于等于simple表单简短关键词，只输入域的中文名 [推荐]message完整的提示消息，替代简单提示消息(当有这个参数的时候，simple就不起作用了)require是否必填，默认为true，即必填，false为非必填，可选to:匹配值对比，对象的name，可选(这个参数是在type参数为eq，gt，gte，lt，lte的时候才用的上的)value:直接匹配值对比，有to则该值被忽略，可选(这个参数是在type参数为eq，gt，gte，lt，lte的时候才用的上的)min:表单可输入的最小字数，可选，不填写表示无限制max:表单可输入的最大字数，可选，不填写表示无限制focusMsg:当表单域获得焦点时出现的提示信息ajax:表单ajax验证的参数配置（JSON方式）
可用参数有：
method:数据提交的方式get/post 默认为get
url :接受ajax验证的程序地址，（路径最好用绝对路径，保险）
success_msg:验证通过时提示的消息
failure_msg:验证不通过时提示的消息
注意：接受ajax验证的程序，在返回值的时候，只能返回1或者0,1代表验证通过，0代表验证不通过

呵呵~~参数是不是把大家都看晕了呢~~别怕别怕~~下面来看一个最简单的例子：调用插件只要几句代码就可以了！

先看HTML代码

额~~好长一段代码呀~~眼睛是不是都看花了哦~~
大家别慌~~我只让你看其中一两个地方
首先”form”标签中的 id=”form2″，比较非常重要，我们在调用插件的时候需要用到，还有method、action大家也必须得注意
然后再看表单中的表单域的name属性（很重要，在写js的时候就需要用到）
页面上的按钮“注册”，必须为submit的类型，button是不可以的。
最后细心的朋友应该发现了input后面跟着一个span id=”form2tip_-e-m-a-i-l”这样的东西，呵呵id为什么要这样呢？呵呵~~说来话长，不多说了，反正如果你想页面出来的时候就有提示框在那，而且您用的也是php的程序的话，那我可以给你一个PHP函数让你把ID初始化成这种类型

function split_input_name($string,$form_id){
??? $chars = preg_match_all('/[a-zA-Z0-9]_?/',$string,$out,PREG_PATTERN_ORDER);
??? $return_string = implode('-',$out[0]);
??? return $form_id . 'tip_-' . $return_string;
}

HTML代码都看明白了吧，那最后就来看看js代码如何写了，同样给出代码

//初始化表单项数组
var items_array = [
??? { name:"login",type:"username",simple:"用户名",focusMsg:'数字和英文及下划线和.的组合，开头为字母，4-20个字符',ajax:{method:'post',url: base_url+'skygq_check_ajax_form_1_2/ajax.html',success_msg:'恭喜！用户名可用',failure_msg:'用户名已存在'}},
??? { name:"email",type:"mail",simple:"Email",focusMsg:'请填写真实并且最常用的邮箱'}
];
//ajax提交回调函数
function showResponse(responseText, statusText, xhr, $form)? {
??? if (responseText == 1){
??????? alert('恭喜！提交成功！');
??? }else{
??????? alert(responseText);
??? }
}
//这里将前面初始化的表单项数组和ajax无刷新提交的参数配置做为参数传给插件，OK了！
$("#form2").skygqCheckAjaxForm({
??? items?????????? : items_array,
??? isAjaxSubmit??? : true,
??? success???????? : showResponse
});

热点排行