jQuery validate 表单验证 ---jQuery的插件

$("#form" ).validate({

event: "keyup" ,

//验证规则
rules:{
author:{
required:true,//必须字段
minlength:2 //至少两字节
},
email:{
required:true,
email:true //此字段为邮件地址
},
url:{
required:false,
url:true //此字段为网址
},
content:{
required:true,
minlength:4
}
},
//错误消息
messages:{
author: {
required: '用户名必须填写' ,
minlength: jQuery.format("名称至少{0}两个字节吧" )
},
email: {
required: '邮箱必须填写,做为联系方式' ,
email: '邮箱貌似不正确哦'
},
content: {
required: '网址必须填写' ,
minlength: jQuery.format("名称至少{0}两个字节吧" )
}
},
submitHandler: function (form) {
//ajax提交表单,需要jQuery.Form插件
$(form).ajaxSubmit({
dataType:'json' ,
success:function (res){
if (res.success){
$('.ajaxsubmit' ).html('发表成功!' ).addClass('ok' );
$('textarea' ).val('' );
$('#comments' ).prepend(res.msg);
}else
$('.ajaxsubmit' ).html(res.msg).addClass('fail' );
}
});
return false;
},
errorPlacement:function (error, element) {
//放置错误提示消息的Element
error.appendTo(element.parent ().find('b' ));
},
errorClass:'fail' ,//错误消息样式
highlight: function (element, errorClass) {
//黄褪显示错误字段,需要jQuery.Highlight插件
$(element).highlightFade({color:'yellow' ,speed:1000 ,iterator:'exponential' })
}
});

 

 

 

所有的检验规则:

(1) required: true         必输
          (2) number: true 只能输入数字(包括小数)
          (3) digits:true 只能输入整数
          (4) minValue: 3 不能小于3
          (5) maxValue: 100 最大不超过100
          (6) rangeValue:[50,100] 值范围为50-100
          (7) minLength: 5 最小长度(汉字算一个字符)
          (8) maxLength:        10 最大长度(汉字算一个字符)
          (9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
          (10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
          (11) email:true 电子邮件
          (12) equalTo: "#field" 与#field值相同
          (13) dateISO:true       日期型,格式为1998/01/22         1999-12-12

 

 

 

1.event 是触发校验的方式,可选值有keyup(每次按键时),blur(当控件失去焦点时),不使用这个参数时就只在按提交按钮时触发

2.如果在提交前还需要进行一些自定义处理使用submitHandler 参数,其它的都比较简单,自己看看API 就成了.

3.debug ,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便.

 

 

 

 

 

 

<input type="submit" name="button" id="button" value="提交"  class="sbt"/>

 

<script src="__PUBLIC__/js/jquery.validate.js" type="text/javascript"></script>

<script language='javascript'>

//表单验证

$(document).ready(function(){

$("#gform").validate({

onfocusout : false, //不响应失去焦点

onkeyup : false,//不响应键盘事件

rules: {

hrr_name : "required",

hrr_zijianjob : "required",

hrr_mile : "required",

hrr_degree : "required",

hrr_phone : "required",

hrr_address : "required",

hrr_email : "required",

hrr_experience : "required"

},

 

messages: {

hrr_name :"<font color='#FF0000'>用户名不能为空</font>",

hrr_zijianjob :"<font color='#FF0000'>用户名不能为空</font>",

hrr_mile :"<font color='#FF0000'>性别不能为空</font>",

hrr_degree :"<font color='#FF0000'>学历不能为空</font>",

hrr_phone :"<font color='#FF0000'>电话不能为空</font>",

hrr_address :"<font color='#FF0000'>电话不能为空</font>",

hrr_email :"<font color='#FF0000'>电子邮件不能为空</font>",

hrr_experience :"<font color='#FF0000'>个人简介不能为空</font>"

}

});

});

 

 

你可能感兴趣的:(html,jquery,Ajax,json)