<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.11.3.js"></script>
<script src="jquery.validate.js"></script>
<script>
/* $.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});*/
$().ready(function () {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
//以下 这个代码就是 验证的关键
onfocusout: function(element){
$(element).valid();
},
onblur:true,
submitHandler:function(form){
alert("submitted");
form.focusInvalid();
},
rules: {
//原来validata自定义类型就这昂用
isDate:'isDate',
dateISO:true,
name: {required: true},
firstname: "required",
},
messages: {
name: {required: "来源名称必填！"},
firstname: "请输入您的名字",
dateISO: "Please enter a valid date ( ISO ).",
}
});
});
</script>
<style>
/* .error{
color:red;
}*/
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<div class="control-group">
<label class="control-label">来源名称<span class="required">*</span></label>
<div class="controls">
<input type="text" name="name" class="span6 m-wrap" value="" required/>
</div>
</div>
<p>
<label for="">名字</label>
<input id="" name="firstname" type="text">
</p>
<div class="control-group">
<label class="control-label">来源名称<span>*</span></label>
<div class="controls">
<input type="text" name="email" class="span6 m-wrap" value="" required/>
</div>
</div>
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
<input class="submit" type="submit" value="提交">
<!--这个是时间 验证-->
<div class="control-group">
<label class="control-label">时间验证<span>*</span></label>
<div class="controls">
<input type="text" name="dateISO" class="span6 m-wrap" value="" required/>
</div>
</div>
<div class="control-group">
<label class="control-label">小红<span>*</span></label>
<div class="controls">
<input type="text" name="isDate" class="span6 m-wrap" value="" required/>
</div>
</div>
</fieldset>
</form>
</body>
</html>
<script>
jQuery.validator.addMethod("isDate", function(value, element){
var ereg = /^(\d{1,4})(-|\/)(\d{1,2})(-|\/)(\d{1,2})$/;
var r = value.match(ereg);
if (r == null) {
return false;
}
var d = new Date(r[1], r[3] - 1, r[5]);
var result = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[5]);
return this.optional(element) || (result);
}, "xiaohong");
</script>
浙公网安备 33010602011771号