jquery validate 注册校验

1、导入js
<script type="text/javascript" src="./script/jquery/jquery.js">
</script>
<script type="text/javascript"src="./script/jquery/jquery.validate.js">
</script>
<script type="text/javascript"
src="./script/jquery/jquery.messages_cn.js">
</script>
<script type="text/javascript"
src="./script/jquery/jquery.metadata.js">
</script>

<script type="text/javascript">
$().ready(function() {
$("#signupForm").validate();
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");
});
</script>



2、在form表单，每个要验证的 属性上加  class声明


<form id="signupForm" action=""">
<ul>
<li>
<span>电子邮箱：</span>
<input type="text" id="email" class="required email" />
<span id="emailMsg"></span>
</li>
<li>
<span>手机号码：</span>
<input type="text" id="phoneNum" class="required mobile" />
<span id="phonenumMsg"></span>
</li>

<li>
<span>设置密码：</span>
<input type="password" id="password"
class="{required:true,minlength:5}" />
<span id="passwordMsg"></span>
</li>
<li>
<span>确认密码：</span>
<input type="password" id="confirm"
class="{required:true,minlength:5,equalTo:'#password'}" />
<span id="confirmMsg"></span>
</li>
<li>
<span>验证码：</span>
<span id="cc" style="font-size: small;"></span>
<input style="width: 100px;" type="text" id="checkCode" />
<span style="cursor: pointer;" onclick="getCheckCode()">换一题</span>
<span id="checkCodeMsg"></span>
</li>
<!--<li><span>&nbsp;</span><input class="tj" type="submit" onclick="register()" value=""/></li>
                            -->
<li>
<span>&nbsp;</span>
<input class="tj" type="submit" value="" />
</li>
<li>
<span>&nbsp;</span>
<div>
点击立即注册，即表示同意并遵守拼趣网的
<a href="yhxy.html">用户协议 </a>和
<a href="yszc.html">隐私政策</a>
</div>
</li>
</ul>
</form>

3、jquery.messages_cn.js内容
jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")
});