参考文章: 点击打开链接
上面的文章, 确实好用, 只是不习惯人家的, 自己再做一遍印象深点, 再加点自己做时的体会。
1. 下载相关的文件: http://download.csdn.net/detail/gf05011/4141867 实在无奈,已无所谓的官方东西可下了,其实前几年还很好找的。这个东西都有版权了?
2. IE10下似乎jquery有问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>将校验规则写到控件中</title>
<script src="jqValidate/jquery.min.js" type="text/javascript"></script>
<script src="jqValidate/jquery.metadata.js" type="text/javascript"></script>
<script src="jqValidate/jquery.validate.js" type="text/javascript"></script>
<script src="jqValidate/jquery.validate.messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//1. 使用class="{}"的方式,必须引入包:jquery.metadata.js
//2. 要使用中文,必须引入包: jquery.validate.messages_cn.js
$("#signupForm").validate();
});
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">
Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">
E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">
Password</label>
<input id="password" name="password" type="password" class="{required:true, minlength:5}" />
</p>
<p>
<label for="confirm_password">
确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</form>
</body>
</html>