一:首先是下载并引用:
<script type="text/javascript" src="assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="assets/js/messages_zh.min.js"></script> //此为中文messages
二:html部分:
<form class="form-horizontal dingdan-form biaodan" action="">
<div class="form-group">
<label for="" class="col-sm-2 control-label">会员来源:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="" placeholder="渠道--西门吹雪" name="firstname">
</div>
<label for="" class="col-sm-2 control-label">会员来源:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="" placeholder="渠道--西门吹雪" name="lastname">
</div>
</div>
<input type="submit" value="提交">
</form>
备注:此处需要注意的是:validation是根据表单元素的name属性绑定的,所以一定要把name属性写上
三:js控制部分:
$().ready(function() {
$(".biaodan").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
}
});
});
备注:rules部分为参数配置部分;message部分为提示信息部分,两部分都是通过表单元素的name属性绑定的
四:避免重复提交的实现:原理是表单验证通过后给提交按钮disabled然后提交
$(document).ready(function() {
$(".biaodan").validate({
submitHandler: function(form) {
$(form).find(":submit").attr("disabled", true).attr("value",
"提交成功");
form.submit();
}
})
});
五:更多扩展功能可到菜鸟教程查看:
http://www.runoob.com/jquery/jquery-plugin-validate.html