jqueryvalidate验证（⾃定义提⽰信息，错误提⽰位置以及颜
⾊）
简单了解如何使⽤，更多规则可在jquery validate官⽹查看
1 效果
2 代码
<!DOCTYPE html>
<html>
<head>
<title>jquery验证</title>
<script type="text/javascript" src="./jquery.js"></script>
<script  type="text/javascript" src="./jquery.validate.js"></script>
<style>
.errorInfo{
color:red
}
</style>
</head>
<body>
<form id="form">
<div class="formItem">
<div>jquery框架定义
<label>name:</label><input type="text"  name="username"/>
</div>
<div class="errorInfo">
<label for="username" class="error"></label>
</div>
</div>
<div class="formItem">
<div>
<label>age:</label><input type="text" name="age" />
</div>
<div class="errorInfo">
<label for="age" class="error"></label>
</div>
</div>
<div class="formItem">
<div>
<label>post:</label><input type="text" name="post" />
</div>
<div class="errorInfo">
<label for="post" class="error"></label>
</div>
</div>
</div>
<div class="formItem">
<div>
<label>email:</label><input type="text" name="email" />
</div>
<div class="errorInfo">
<label for="email" class="error"></label>
</div>
</div>
</form>
<script type="text/javascript">
$("#form").validate({
// 失去焦点就验证
onfocusout: function(element) { $(element).valid(); },
rules: {
username: {
required: true
},
age: {
required: true
},
post: {
required: true
},
//邮箱
email:{
required: true,
email: true
},
},
messages:{
username:{
required:"请输⼊名字"
},
age:{
required:"请输⼊年龄"
},
post:{
required:"请输⼊岗位名称"
},
email:
{
required:"请输⼊邮箱",
email:"请输⼊⼀个正确的邮箱"
},
}
})
</script>
</body>
</html>
onfocusout: function(element) { $(element).valid();} 第⼀次失去焦点就触发rules规则中的字段对应的是name值；
messages可以重新定义所有提⽰信息的内容
label的for属性对应name，即可将提⽰信息显⽰在任何想要的位置
jquery validate验证(⾃定义提⽰信息，错误提⽰位置以及颜⾊)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。