JQ表单验证代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
width: 750px;
margin: 0px auto;
}
.outer>div{
width: 100%;
margin: 0px auto;
border:1px solid black;
border-radius:5px;
}
.form_all>div{
margin-top: 15px;
height: 25px;
line-height: 25px;
width: 100%;
}
.form_all>div>label{
display: inline-block;
width: 150px;
}
.form_all>div>div{
display: inline-block;
height: 25px;
line-height: 25px;
padding-left: 5px;
padding-right: 5px;
margin-left: 20px;
/*display: none;*/
}
.subButton{
margin-left: 100px;
display: block;
margin-top: 20px;
margin-bottom: 20px;
background: url(img/button.gif) no-repeat;
background-size: 100%;
height: 55px;
width: 150px;
}
div label.error{
color: red;
width: 300px;
display: inline-block;
}
div label.checked{
color: green;
width: 300px;
display: inline-block;
}
</style>
</head>
<body>
<div class="outer">
<img src="img/register_logo.gif" />
<div>
<form class="form_all" >
<div>
<label>通行证用户名:</label><input type="text" id="textName" name="textName"/>
</div>
<div>
<label>登录密码:</label><input type="text" id="textPassword" name="textPassword"/>
</div>
<div>
<label>重复登录密码:</label><input type="text" id="textConfirm" name="textConfirm"/>
</div>
<div>
<label>性别:</label><input type="radio" name="sex"/><a>男</a><input type="radio" name="sex"/><a>女</a>
</div>
<div id="divTrueName">
<label>真实姓名:</label><input type="text" name="realName"/>
</div>
<div>
<label>昵称:</label><input type="text" id="textCaname" name="textCaname"/>
</div>
<div>
<label>关联手机号:</label><input type="text" id="textTel" name="textTel"/>
</div>
<div>
<label>保密邮箱:</label><input type="text" id="textEmail" name="textEmail"/>
</div>
<button class="subButton">
</button>
</form>
</div>
</div>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.validate.js"></script>
<script>
$(function (e) {
$(document).ready(function (e) {
$('.form_all').validate({
rules:{
textName:{
required:true,
email:true
},
textPassword:{
required:true,
checkPassword:true
},
textConfirm:{
required:true,
equalTo:"#textPassword"
},
sex:{
required:true
},
textCaname:{
required:true
},
textTel:{
required:true
},
textEmail:{
required:true
}
},
messages:{
textName:{
required:"通行证用户名不能为空",
email:"请输入正确的格式"
},
textPassword:{
required:"密码不能为空",
},
textConfirm:{
required:"确认密码不能为空",
equalTo:"两次密码不一致"
},
sex:{
required:"请选择您的性别"
},
textCaname:{
required:"昵称不能为空,请输入昵称"
},
textTel:{
required:"关联手机号不能为空,请输入关联手机号码"
},
textEmail:{
required:"保密邮箱不能为空,请输入密保邮箱"
}
},
errorPlacement:function(error,element){
error.appendTo(element.parent());
let img=$('<img src="img/li_err.gif"/>')
error.before(img)
},
success:function (error, element) {
if(element.name==='textName'){
error.html("").addClass("checked");
error.text("通行证用户名输入正确");
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
if(element.name==='textPassword'){
error.html("").addClass("checked");
error.text("密码输入正确")
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
if(element.name==='textConfirm'){
error.html("").addClass("checked");
error.text("两次密码一致")
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
if(element.name==='textCaname'){
error.html("").addClass("checked");
error.text("昵称输入正确")
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
if(element.name==='textTel'){
error.html("").addClass("checked");
error.text("手机号输入正确")
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
if(element.name==='textEmail'){
error.html("").addClass("checked");
error.text("邮箱正确")
let img=$('<img src="img/li_ok.gif"/>')
error.before(img)
}
}
// success:function (label) {
// label.html("").addClass("checked");
// label.text("成功")
// }
})
})
jQuery.validator.addMethod("checkPassword", function(value, element) {
var pattern = /^\d{6,12}$/;
return this.optional(element) || (pattern.test(value));
}, "密码长度为6-16");
})
</script>
</body>
</html>
解决方法
success:function (error, element) {
if(element.name==='textName'){
error.html("").addClass("checked");
error.text("通行证用户名输入正确");
let img=$('<img src="img/li_ok.gif"/>')
if(error.parent().find('img')!=null){
error.parent().find('img').remove()
console.log(error.parent().find("img"))
}error.before(img)
}