程序博客网 > 第比利斯事件知乎

jquery.validate.js插件使用简单说明

来源：互联网发布：第比利斯事件知乎编辑：程序博客网时间：2024/04/29 09:12

第一步页面引入：

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

样式：

<style type="text/css">

//错误样式
label.errCss{
color: red;
}

//验证成功样式一定是valid否则成功后输入错误信息还是成功的样式，只是提示信息是错误的
label.valid{
color:green;
}
</style>

//验证脚本

<script type="text/javascript">

$(function(){

$("#submitChatMsg").validate({
debug:true,
rules:{//验证规则
username:{
required:true,
minlength:4,
buge:true,//自定义验证规则
remote:{
type:'post',
url:"isExistMessage.do",//返回data必须为true或false
data:{//传递的参数
username:function(){
return $("#username").val();//参数取值
},
msg:function(){
return $("#msg").val();//参数取值
}
}
},

},
msg:"required",
sex:"required"

},
messages:{//错误信息
username:{
required:"不能为空！",
minlength:"不能小于4个字符！",
buge:"请输入buge",//自定义返回的错误信息
remote:jQuery.format("已存在为空！"),

},
msg:"不能为空！",
sex:"必选"
},
focusInvalid:false,//验证后第一个输入框是否获取焦点
focusCleanup:true,
errorClass:"errCss",//错误信息样式
errorPlacement:function(error,element){//错误信息的位置
error.appendTo(element.parent());

},

success:function(label){//验证成功执行函数
label.html(" ").addClass("valid").text("ok");
},
submitHandler:function(form){//验证成功异步提交
var param = $('#submitChatMsg').serialize();
$.ajax({type:'post',
url:'addChat.do',
data:param,
complete:function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
//alert(textStatus);
},
success: function(data){
if(data=="Y"){
$.ajax({
type:'post',
url:'getChatMsgAction.do',
success:function(data){
$('#msgInfo').html(data);
}
});
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
// alert("error");
}
});
setInterval("getMesgInfo()",1000);
}

});

})

//自定义规则：buge自定义规则名，value验证对象的值，function后面的字符串是返回的错误信息

jQuery.validator.addMethod("buge",function(value){
return value=="buge"
},'please enter "buga" !')
function getMesgInfo(){
$.ajax({
type:'post',
url:'getChatMsgAction.do',
success:function(data){
$('#msgInfo').html(data);
}
});
}
</script>

//body体

<body>
<center>
<form id="submitChatMsg">
<table width="500">
<tr>
<td>
姓名：<input id="username" name="username"/>
</td>
</tr>
<tr><td>性别：<input name="sex" type="radio" value="0"/>男<input name="sex" type="radio" value="1"/>女</td></tr>
<tr>
<td>
内容：<input id="msg" name="msg"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="sub" value="提交"/>
</td>
</tr>
</table>
</form>
<div id="msgInfo">
</div>
</center>
</body>

0 0

第比利斯事件知乎

第比利斯事件知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子生活报数字报刊南国早报数字版南国早报头版今天南国早报今日头版终南山陆绕靳南屿南屿房价南屿招聘神道帝君顾屿南歌福州南屿房价闽侯南屿房价福州南屿福州闽侯南屿南屿闽侯楼盘南屿镇邮编南屿镇就是喜欢被他靳南屿就是喜欢被他陆绕靳南屿作者啊肥阿女主陆绕靳南屿哈尔滨南岗南岗区南岗瑶寨南岗客运站南岗南岗区邮编南岗万达鲜花南岗区南岗楼盘南岗新楼盘广州南岗哈尔滨南岗区南岗瑶寨旅游哈尔滨南岗区邮编哈尔滨南岗邮编哈尔滨南岗客运站哈尔滨市南岗区邮编哈尔滨市南岗区南岗千年瑶寨重回十六岁南岛樱桃南岛