easyform ajax提交,GitHub - JimmyBryant/easyform: 一款轻量级的jQuery表单验证插件

easyform

一款轻量级的jQuery表单验证插件。

Features

基于jQuery，兼容各种浏览器

体积小,.min文件不到3K

修改js配置就可以实现复杂的表单校验

错误提示信息不会破坏表单结构

支持回调函数、异步提交表单

Usage

首先你得在页面中引用jquery和jquery.easyform.js

最基本的用法

$('form').easyform({

fields : ['#input-email','.input-password'] //表单的id或者className，只要jquery选择器支持就行

});

提交表单的时候easyform会校验这些表单元素的value是否为空

也许你想在点击某个button的时候就校验表单，这个时候你需要指定submit button

$('form').easyform({

submitButton : '.submit-button' //当点击button时校验表单

});

你也可以进行数据类型校验并且自定义错误提示信息

$('form').easyform({

fields : {

'#input-password' : {

error : 'Email不能为空', //内容为空时显示的错误信息

email : {

test : 'email', //我们提供两种基本的数据格式校验，'email'、'url'

message : 'Email格式不正确'

}

},

'#input-password' : {

error : '请输入密码'，

mypassword : {

test : /^[\w]{8,16}$/, //同样你也可以使用正则完成特殊的数据格式校验

message : '密码长度为8-16'

}

}

}

});

校验成功后执行回调函数

$('form').easyform({

submitButton : '.submit-button',

success : function(){

alert('easy to validate form'); //校验成功后执行回调函数，表单仍然会提交

}

});

$('form').easyform({

submitButton : '.submit-button',

success : function(){ //如果想要阻止表单提交,回调函数return false就可以

alert('easy to validate form');

return false;

}

});

取消对某些表单项的校验

var easyform = $('form').easyform({

fields : ['#input-email','#input-password','#input-title'] //使用element的id或者className

});

easyform.removeFields('#input-title');

easyform.removeFields(['#input-email','#input-password']);

增加对某些表单项的校验

var easyform = $('form').easyform({

});

easyform.addFields({

'#input-email' : {

error : 'Email不能为空', //内容为空时显示的错误信息

email : {

test : 'email', //我们提供email校验

message : 'Email格式不正确'

}

},

'#input-password' : {

error : '请输入密码'，

mypassword : { //自定义校验

test : /^[\w]{5,16}$/,

message : '密码长度为8-16'

}

}

});

easyform.addFields('#input-title');

easyform.addFields(['#input-description','#input-price']); //添加多项可以使用数组