使用Jquery.validate做表单验证

HTML示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>测试jQuery的validate插件的表单</title>

	<!-- 1，导入三个js文件 -->
    <script type="text/javascript" src="lib/jquery.js"></script>
	<script type="text/javascript" src="lib/jquery.metadata.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>

	<!-- 2，指定哪个表单在提交前要先进行验证 -->
	<script type="text/javascript">

jQuery.extend(jQuery.validator.messages, {
    required: "请填写本字段",
    remote: "验证失败",
    email: "请输入正确的电子邮件",
    url: "请输入正确的网址",
    date: "请输入正确的日期",
    dateISO: "请输入正确的日期 (ISO).",
    number: "请输入正确的数字",
    digits: "请输入正确的整数",
    creditcard: "请输入正确的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入指定的后缀名的字符串",
    maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
    minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
    rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
    range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
    max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
    min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});


		$(function(){
			$("#myForm").validate();		
		});
	</script>

	<style type="text/css">
		label.error{
			color: red;
			margin-left: 15px;
		}
	</style>
</head>
<body>


	<!-- 3，指定字段的验证规则 -->
	<form action="" id="myForm">
		名称（必填，至少3个字符）　
		<input type="text" name="loginName" class="required {minlength:3, messages:{required:'请输入用户名！！！'}}"><br>
		
		密码（必填）　
		<input type="password" name="password" class="required"><br>
		
		再次输入（要和密码一致）
		<input type="password" name="password2" class="{equalTo:'[name=password]'}"><br>
		
		E-mail（必填，格式要正确）
		<input type="text" name="email" class="required email"><br>
		
		E-mail(json)  
		<input type="text" name="email2" class="{required:true,email:true}"><br>
		
		<input type="submit" value="提交">
	</form>

	<hr>
	<a href="?">返回</a>

</body>
</html>

<!--
<label class="error">abc</label>
<font class="error">abc</font>
字段的name值不要相同，否则指定的验证不起作用。
-->
效果
使用Jquery.validate做表单验证

猜你喜欢
