<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>超群.com的博客 &#187; validate</title>
	<atom:link href="http://www.fuchaoqun.com/tag/validate/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.fuchaoqun.com</link>
	<description></description>
	<lastBuildDate>Thu, 22 Jul 2010 23:31:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>jQuery表单校验</title>
		<link>http://www.fuchaoqun.com/2009/11/jquery-validate/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=jquery-validate</link>
		<comments>http://www.fuchaoqun.com/2009/11/jquery-validate/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 11:23:25 +0000</pubDate>
		<dc:creator>超群.com</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[validate]]></category>

		<guid isPermaLink="false">http://www.fuchaoqun.com/?p=253</guid>
		<description><![CDATA[最近有个项目，用到很多的表单校验，尝试了一下jQuery.validator，甚是顺手，地址：http://plugins.jquery.com/project/validate，基本的用法： $&#40;'#formId'&#41;.validate&#40;&#123; debug:true, // 打开debug模式，不会真实提交，适合测试 rules:&#123; uName:&#34;required&#34;, // 需要录入 uNick:&#123; required:true &#125;, // 需要录入的另一种写法 uBlog:&#123; required:true, url:true &#125; // 需要输入，且录入的必须是url &#125;, messages:&#123; // 自定义提示语文字 uName:&#34;请输入用户名&#34; &#125;, submitHandler:function&#40;form&#41; &#123; // 表单提交，需要jqueyr.form插件 form.submit&#40;&#41;; &#125; &#125; 阅读一下文档差不多就会了解，支持的校验格式有： required:必填字段 email:电子邮件 url:合法的网址 date:日期 dateISO:日期(ISO) number:数字 digits:整数 creditcard:信用卡号 equalTo:相同的值 accept:拥有合法后缀名的字符串 maxlength:最多长度的字符串 minlength:最少长度的字符串 rangelength:一个长度介于最小值和最大值之间的字符串 range:一个介于最小值和最大值之间的值 max:最大值 min:最小值 相对高阶一点功能: 自定义错误提示信息 当然，你可以通过定义messages来修改提示信息，但你想偷懒又不想用默认的英文提示，直接引入默认提示文字 &#60;script src=&#34;path/to/localization/messages_cn.js&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>最近有个项目，用到很多的表单校验，尝试了一下jQuery.validator，甚是顺手，地址：<a href="http://plugins.jquery.com/project/validate" target="_blank">http://plugins.jquery.com/project/validate</a>，基本的用法：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#formId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">validate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    debug<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// 打开debug模式，不会真实提交，适合测试</span>
    rules<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>
        uName<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;required&quot;</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// 需要录入</span>
        uNick<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>
            required<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// 需要录入的另一种写法</span>
        uBlog<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>
            required<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
            url<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #006600; font-style: italic;">// 需要输入，且录入的必须是url</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    messages<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// 自定义提示语文字</span>
        uName<span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;请输入用户名&quot;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    submitHandler<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>form<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// 表单提交，需要jqueyr.form插件</span>
        form.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>阅读一下<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">文档</a>差不多就会了解，支持的校验格式有：</p>
<blockquote><p>required:必填字段</p>
<p>email:电子邮件</p>
<p>url:合法的网址</p>
<p>date:日期</p>
<p>dateISO:日期(ISO)</p>
<p>number:数字</p>
<p>digits:整数</p>
<p>creditcard:信用卡号</p>
<p>equalTo:相同的值</p>
<p>accept:拥有合法后缀名的字符串</p>
<p>maxlength:最多长度的字符串</p>
<p>minlength:最少长度的字符串</p>
<p>rangelength:一个长度介于最小值和最大值之间的字符串</p>
<p>range:一个介于最小值和最大值之间的值</p>
<p>max:最大值</p>
<p>min:最小值</p></blockquote>
<p><strong>相对高阶一点功能:</strong></p>
<ul>
<li>自定义错误提示信息
<p>       当然，你可以通过定义messages来修改提示信息，但你想偷懒又不想用默认的英文提示，直接引入默认提示文字</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;path/to/localization/messages_cn.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<li>IE6下不工作的bug
<p>传闻IE6下，jquery.validate.js有乱码，不能正常工作，解决办法：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script src<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;path/to/jquery.validate.js&quot;</span> type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span> charset<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;iso-8859-1&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

</li>
<li>控制错误信息显示位置
<p>有的时候默认的错误信息显示有问题，比如多个单选框，默认的会把错误信息显示在第一个单选框后面，页面就乱了，解决办法：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">errorPlacement<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>error<span style="color: #339933;">,</span> element<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>element.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:radio&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        error.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>element.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;td&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        error.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>element.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>当然，还可以重载invalidHandler来实现</li>
<li>依赖校验
<p>有的时候，一个输入框的校验依赖于其他条件，比如登录的时候可以通过用户名或者邮箱登录，只有当用户选择用邮箱登录时，才对邮箱输入框验证，rules中可以这样写：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">uMail<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>
    required<span style="color: #339933;">:</span><span style="color: #009900;">&#123;</span>depends<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">==</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#isMail'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    email<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>这样只有用户选择了用邮箱登录才会校验 邮箱项，否则不校验。</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.fuchaoqun.com/2009/11/jquery-validate/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->