jquery validate demo_caca() jquery-优快云博客

本文介绍如何在HTML表单中使用jQuery实现输入验证，包括必填项、长度限制和自定义验证规则，以及如何将jQuery与HTML表单元素无缝结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE>
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title></title>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
</head>
<body>
<form id="test" method="post">
<!-- <input id="cname" name="name" class="required validBob"> <br/> -->
name:<input id="cname" name="name"> <br/>
age:<input id="cage" name="age"><br/>
<input id="gender_male" name="gender" type="radio" value="m" class="required">male<br/>
<input id="gender_female" name="gender" type="radio" value="f">female<br/>
<br/>
<input type="submit" value="Submit">
<br/>
<label for="cname" class="error" generated="true" style="display:none;"></label><br/>
<label for="cage" class="error" generated="true" style="display:none;"></label><br/>
<label for="gender" class="error" generated="true" style="display:none;"></label>
</form>
<script>
// document:  http://rocketsquared.com/wiki/Plugins/Validation/validate#options

$(function(){
	$.validator.addMethod("validBob", function(value, element){
            if (value == "bob")
                return false;
            return true;
     });
		
	$("#test").validate({
	    onfocusout:false,
		focusInvalid:false,
		rules:{
			age:"required",
			name:{
				required:true,
				validBob:true,
				minlength: 2
			}
		},
		messages:{
			age:"The age is required.",
			name:{
				required:"The name is required.",
				validBob:"The name can't be bob."
			},
			gender:"The gender is required."
		}
	});
});
</script>
</body>
</html>