其他：
<form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br />
secret: <input type="text" name="secret" value="Yousecret" /><br /> </form> $("form").serialize(); //FirstName=Bill&LastName=Gates 一般用法： $.ajax({ type: 'post', url: 'your url', data: $("form").serialize(), success: function(data) { // your code } });
serializeArray()读取form表单中的所有数据列表
var siginList = $('form').serializeArray();
<div contenteditable="true">我是一个可被编辑的DIV</div>
一.jqeuryvalidate
参数选项
$("form").validator({
debug :0, //调试
//0：关闭实时验证，只在提交表单的时候执行验证
//1：输入框失去焦点（focusout）时执行验证
//2：输入框改变值（input）时执行验证
//3：输入框失去焦点和改变值（综合 1 + 2） (v0.8.0+)
//8：同 2，并且详细提示每个规则的结果 (v0.9.0+)
//9：同 3，并且详细提示每个规则的结果 (v0.9.0+)
//大于 100 的数值：验证延迟时间
timely :1; //实时验证
theme :"default", //主题
stopOnError :false, //在第一次错误时停止验证 关闭此开关，以便一次性显示所有消息
focusInvalid :true, //第一个错误字段自动获得焦点
focusCleanup :false, //输入框获得焦点时清除验证消息
ignoreBlank :false, //不验证空值的字段（只针对实时验证）
ignore :"", // 默认忽略验证 jQuery 选择器选中的字段
ignore :':hidden', //任何不可见的元素，都不作验证
ignore :'#tab2', //id为tab2下的所有子元素都不作验证
display:'null', // 自定义消息中{0}的替换字符
display:Function(elem){ // 自定义消息中{0}的替换字符
return $(elem).closest('.form-item').children('label:eq(0)').text();
},
target :null, //默认 自定义消息的显示位置
target :'#myContainer', // 将所有消息全部提示在 id 为 myContainer 里面
target:Function(elem){// 自己指定消息容器位置
var $formitem = $(elem).closest('.form-item'),
$msgbox = $formitem.find('span.msg-box');
if (!$msgbox.length) {
$msgbox = $('<span class="msg-box"></span>').appendTo($formitem);
}
return $msgbox;
},
valid:null,// 默认 表单验证通过时调用此函数
invalid: function(form){//表单验证通过时调用此函数
// 表单验证通过，提交表单
$.post(url, $(form).serialize() ).done(function(d){
// some code
});
},
invalid:null,//表单验证失败后的回调。也可以使用 invalid.form 事件
invalid:function(){
//$('#form').on('invalid.form', function(e, form, errors){});
},
validation:null,//验证每个字段后调用此函数
validation: function(element, result){
$("#submitBtn").prop('disabled', !element.form.isValid)
},
rules:null,//自定义规则
rules: {//自定义用于当前实例的规则，支持两种定义方式
// 自定义验证函数，具有最大的灵活性
myRule: function(el, param, field){
//验证并返回布尔值
},
// 简单配置正则及错误消息
another: [/^\w*$/, 'Please enter the letters or underscore.']
},
messages:null,//自定义消息
messages: {
required: "不能为空",
email: "请填写正确的邮件地址",
myRule:"自定义规则的提示消息"
},
fields:null,//配置字段规则及参数
fields: {
//为input[name=foo]调用前面定义的两个规则
foo: 'required; myRule[param]; another',
username: {
//字段规则
rule: "姓名: required; myRule; rule2; rule3",
//(自定义字段中?)每个规则的错误消息
msg: {
myRule:"自定义规则的提示消息", #注意这里值为false和""则会显示默认的错误提示
required: "请填写姓名",
rule2: "xxxx",
rule3: "xxxx"
},
//自定义获得焦点时的友好提示信息
tip: "填写真实姓名有助于朋友找到你",
//自定义字段验证成功后显示的消息
ok: "{0}填写正确", //返回姓名填写正确
//是否启用实时验证，默认继承
timely: false,
//验证当前字段，但是实际上在 target 的元素上提示错误消息
//如果目标元素是输入框（input，textarea、select），将会以目标元素为基准点，插入一条消息；
//如果目标元素是消息占位（className 为 msg-box），这和直接使用消息占位没有区别
//其他情况下，直接显示在target指向的容器中
target: "#msg_holder",
//字段验证通过的回调
valid:function(form){},
//字段验证失败的回调
valid:function(form){},
//使用 dataFilter 回调可以转换 ajax 返回的结果为 nice-validator 支持的格式
dataFilter:function(form){},
must:true,//是否强制验证该字段
msgWrapper:"span",//自定义该字段的消息容器的标签名
msgMaker:"",//自定义该字段的消息生成器 参数？
msgClass:"",//自定义该字段的消息Class 在.msg-box消息容器标签上
msgStyle:"font-size:14px;",//自定义该字段的消息 CSS 样式 绑定在.msg-box消息容器标签上
getValue:function(){},//自定义 value 的 getter 参数？
setValue:function(){},//自定义 value 的 setter 参数？
},
},
beforeSubmit :null,//在提交表单之前调用此函数
beforeSubmit:function(form){
//一般在提交之前修改某些form元素
},
dataFilter:null,//转换服务端通过ajax返回的数据为插件支持的格式一般和remote默认规则搭配使用
dataFilter:function(data){
//假设服务端返回结果为： {"status":600, "msg":"名字已被占用"}
if (data.status === 200) return "";
else return data.msg;
},
//主题相关的参数
showOk:true,//默认 是否显示成功提示(前提是有传ok的消息) 返回布尔 或者字符串
showOk:false,//如果设置成false在字段验证通过后将只是简单的隐藏消息。
showOk:'正确',//如果传递一个字符串，在验证通过后将提示这个消息
showOk:'',//如果设置成空字符串，将只显示一个成功的图标
validClass:'has-succes', //为验证通过的form表单添加的class名
invalidClass:"has-error",//验证不通过的输入框添加的class名
bindClassTo:"#verifiable",//设置 validClass 和 invalidClass 添加到的位置
formClass:"n-default", //主题的 class 名称，添加在 form 上
msgClass: "n-top", //消息将自动显示在输入框上边
msgClass: "n-right", //默认 消息将自动显示在输入框右边
msgClass: "n-bottom", //消息将自动显示在输入框下边
msgClass: "n-left", //消息将自动显示在输入框左边
msgClass: "n-right myclass", //消息将自动显示在输入框右边，你还可以通过myclass来定义更多样式
msgStyle:"margin-left:-10px; margin-top:10px;",//为消息容器 自定义css
msgWrapper:"span",//消息容器的元素标签
msgMaker:null,//自定义消息 HTML 结构 为false则不生成提示消息
msgMaker: function(opt){
return '<span class="'+ opt.type +'">' + opt.msg + '</span>';
/* opt包含的子属性
type：消息类型（可能的值为：error / ok / tip / loading）
cls： 即msgClass参数的值
style： 即msgStyle参数的值
icon： 即msgIcon参数的值
arrow： 即msgArrow参数的值
show： 即msgShow参数的值
hide： 即msgHide参数的值
以上 msgMaker 配置，将生成如下消息结构 <div class="msg-box n-right" for="user[name]"> <span class="n-error">Please fill this field.</span> </div> */ }, msgIcon:"<span class="n-icon"></span>",//自定义消息图标的 HTML 模板 msgArrow:"", //自定义消息箭头的 HTML 模板 msgShow:null, //消息提示之前调用此函数 msgShow:function($msgbox, type){ // }, msgHide:null,//消息隐藏之前调用此函数 msgHide:function($msgbox, type){ // } });
消息体html结构：
<span class="msg-box" for="quanxian" style=""> <span role="alert" class="msg-wrap n-error"> <span class="n-icon"></span> <span class="n-msg">协议必选</span> </span> </span>
事件：
.on("validation")：描述：每次验证完一个字段，都会触发 validation 事件，通过该事件可以获取到当前验证字段的验证结果。
$('#form').on('validation', function(e, current){
var form = this;
// form 中是否所有字段都验证通过
console.log(form.isValid);
// 当前验证字段是否通过
console.log(current.isValid);
// 打印其他属性
console.log(current.element);
console.log(current.value);
console.log(current.msg);
});