jQuery表单验证通过后success: function()移除CSS样式问题 10
验证通过后success:function()方法只会移除<span>中的错误提示信息，但不会移除<input>标签中的Sytle属性，求解。<body><div><fo...
验证通过后success: function()方法只会移除<span>中的错误提示信息，但不会移除<input>标签中的Sytle属性，求解。
<body>
<div>
<form action="#" method="post" id="form1">
账号：<p><input type="text" name="id" /><span style="color:Red;font-size:10px;"></span></p>
密码：<p><input type="password" name="password" id="password"/><span style="color:Red;font-size:10px;"></span></p>
确认密码：<p><input type="password" name="repassword"/><span style="color:Red;font-size:10px;"></span></p>
<p><input type="submit" value="提交" id="submit1"/></p>
</form>
</div>
<script type="text/javascript">
$(function(){
$("#form1").validate({
rules:{
id:{
required:true,
minlength:6,
maxlength:10
},
password:{
required:true,
minlength:4,
maxlength:18
},
repassword:{
required:true,
minlength:4,
maxlength:18,
equalTo:"#password"
}
},
messages:{
id:{
required:"账号不能为空！",
minlength:"账号不能少于6位",
maxlength:"账号不能多于10位"
},
password:{
required:"密码不能为空！",
minlength:"密码不能少于4位",
maxlength:"密码不能多于18位"
},
repassword:{
required:"密码不能为空！",
minlength:"密码不能少于4位",
maxlength:"密码不能多于18位",
equalTo:"密码不一致"
}
},
errorPlacement:function(error,element){
element.css({"padding":"2px 2px",
"background-color":"yellow","color":"#333","border":"1px solid orange","vertical-align":"middle"});
element.next("span").empty();
element.next("span").append(error.html());
},
success: function (label) {
label.attr("style","");
label.next("span").empty();
},
});
});
</script>
</body> 展开
<body>
<div>
<form action="#" method="post" id="form1">
账号：<p><input type="text" name="id" /><span style="color:Red;font-size:10px;"></span></p>
密码：<p><input type="password" name="password" id="password"/><span style="color:Red;font-size:10px;"></span></p>
确认密码：<p><input type="password" name="repassword"/><span style="color:Red;font-size:10px;"></span></p>
<p><input type="submit" value="提交" id="submit1"/></p>
</form>
</div>
<script type="text/javascript">
$(function(){
$("#form1").validate({
rules:{
id:{
required:true,
minlength:6,
maxlength:10
},
password:{
required:true,
minlength:4,
maxlength:18
},
repassword:{
required:true,
minlength:4,
maxlength:18,
equalTo:"#password"
}
},
messages:{
id:{
required:"账号不能为空！",
minlength:"账号不能少于6位",
maxlength:"账号不能多于10位"
},
password:{
required:"密码不能为空！",
minlength:"密码不能少于4位",
maxlength:"密码不能多于18位"
},
repassword:{
required:"密码不能为空！",
minlength:"密码不能少于4位",
maxlength:"密码不能多于18位",
equalTo:"密码不一致"
}
},
errorPlacement:function(error,element){
element.css({"padding":"2px 2px",
"background-color":"yellow","color":"#333","border":"1px solid orange","vertical-align":"middle"});
element.next("span").empty();
element.next("span").append(error.html());
},
success: function (label) {
label.attr("style","");
label.next("span").empty();
},
});
});
</script>
</body> 展开
展开全部
建议你将错误的样式定义成一个class，错误时直接给元素添加class，成功时移除class就行了：
.MyError {
padding:2px 2px;
background-color:yellow;
color:#333;
border:1px solid orange;
vertical-align:middle
}验证失败时：
element.addClass("MyError");验证成功时：
element.removeClass("MyError");
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
