jquery.formance.min.js 用于格式化和验证表单字段的js插件

jquery.formance.min.js 用于格式化和验证表单字段的js插件

jquery.formance.min.js 用于格式化和验证表单字段的js插件,基于条纹的 jquery.payment图书馆。它支持各种领域,如信用卡CVC,信用卡到期,信用卡号码,电子邮件地址,日期,号码,安大略的驾驶执照号码和更多,可惜可定制化太差,不太适合国内用户使用

第一步引入bfwone 加载依赖项jquery

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.formance.min"], function() {
                var  fields = ['credit_card_number',
                    'credit_card_expiry',
                    'credit_card_cvc',
                    'dd_mm_yyyy',
                    'yyyy_mm_dd',
                    'email',
                    'number',
                    'phone_number',
                    'postal_code',
                    'time_yy_mm',
                    'uk_sort_code',
                    'ontario_drivers_license_number',
                    'ontario_photo_health_card_number',
                    'ontario_outdoors_card_number']

                $.each(fields, function (index, value) {
                    $('input.'+value).formance('format_'+value)
                    .addClass('form-control')
                    .wrap('<div class=\'form-group\' />')
                    .parent()
                    .append('<label class=\'control-label\'>Try This Demo!</label>');

                    $('input.'+value).on('keyup change blur', function (value) {
                        return function (event) {
                            $this = $(this);
                            if ($this.formance('validate_'+value)) {
                                $this.parent()
                                .removeClass('has-success has-error')
                                .addClass('has-success')
                                .children(':last')
                                .text('√!');
                            } else {
                                $this.parent()
                                .removeClass('has-success has-error')
                                .addClass('has-error')
                                .children(':last')
                                .text('×');
                            }
                        }
                    }(value));
                });
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">

        <section>

            <div class='field' id='phone_number'>
                <h4>North American Phone Number</h4>
                <p>
                    <input type="text" class="phone_number" placeholder="Phone Number">
                </p>

                <p>
                    Formats the phone number in the <code>(111) 111 - 1111</code> format :
                </p>
                <ul>
                    <li>Limits to 10 numbers</li>
                    <li>Restricts inputs to numbers </li>
                    <li>Includes <code>(</code> and <code>)</code> around the area code</li>
                    <li>Includes a <code>-</code> between the prefix (first 3 digits after the area code) and the line number (last 4 digits)</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.phone_number'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_phone_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the phone number:
                </p>
                <ul>
                    <li><em>Does NOT validate whether the number actually exists.</em></li>
                    <li>Validates length (after stripping away non digit characters) </li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='6131231234' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_phone_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='(613) 123 - 1234' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_phone_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='(613) 123 - 12345' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_phone_number'</span><span class="p">);</span> <span class="c1">// false</span>
                    </pre>
                </div>


            </div>

            <div class='field' id='dd_mm_yyyy'>
                <h4>Date DD / MM / YYYY</h4>
                <p>
                    <input type="text" class='dd_mm_yyyy' placeholder="Date DD / MM / YYYY">
                </p>

                <p>
                    Formats the date in the <code>dd / mm / yyyy</code> format:
                </p>
                <ul>
                    <li>Limits to 8 numbers</li>
                    <li>Restricts input to numbers or slashes depending on the current state</li>
                    <li>Includes a <code>/</code> between the day & month and month & year.</li>
                    <li>Does NOT accept shorthand to avoid ambiguities</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.dd_mm_yyyy'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_dd_mm_yyyy'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the date:
                </p>
                <ul>
                    <li>Validates the date can be parsed.</li>
                    <li>Validates the date actually exists so it will fail if February 30th is entered even though it passes parsing.</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre><span class="nx">$</span><span class="p">(</span><span class="s1">'input.dd_mm_yyyy'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_dd_mm_yyyy'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Date includes a helper function to retrieve the date value. <em>Note it does not check to see if it is valid</em>. It simply creates a date object with the specified values which may be incorrect. For example <code>new Date(2013, 2-1, 30)</code> returns March 2nd because February does not have 30 days. You should check if it is valid before using the date.
                </p>

                <p>
                    If the text is parsed without any errors then a Javascript Date object is returned otherwise false.
                </p>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='01 / 07 / 2013' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'val_dd_mm_yyyy'</span><span class="p">);</span>   <span class="c1">// new Date(2013, 7-1, 1)</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='dd / 07 / 2013' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'val_dd_mm_yyyy'</span><span class="p">);</span>   <span class="c1">// false </span>
                    </pre>
                </div>

            </div>

            <div class='field' id='yyyy_mm_dd'>
                <h4>Date YYYY / MM / DD</h4>
                <p>
                    <input type="text" class='yyyy_mm_dd' placeholder="Date YYYY / MM / DD">
                </p>

                <p>
                    Similar to documentation of <a href='#dd_mm_yyyy'>dd / mm / yyyy</a> except the format is <code>yyyy / mm / dd</code>.
                </p>
            </div>



            <div class='field' id='email'>
                <h4>Email (Simple Algorithm)</h4>
                <p>
                    <input type="text" class='email' placeholder="Email">
                </p>

                <h4>Email (Complex Algorithm)</h4>
                <p>
                    <input type="text" class='email' placeholder="Email" data-formance_algorithm="complex">
                </p>

                <p>
                    You cannot format an email address field because there is no structure.
                </p>

                <p>
                    Before everybody goes on a rant, I agree that the only way to validate an email address is to send it an email. However, some client side validation does not hurt especially since 99% of email addresses won't have multiple <code>@</code> symbols and be top level domains.
                </p>

                <p>
                    If you want to contribute another email validator by all means do so. It would be helpful to have multiple email validators with varying degrees of coverage.
                </p>

                <p>
                    Validates the email address:
                </p>
                <ul>
                    <li>Validates the email address using the algorithm specified by the data attribute <code>formance_algorithm</code>. By default the <code>simple</code> algorithm is used.</li>
                    <li>For now there are only 2 algorithms <code>simple</code> and <code>complex</code>. </li>
                    <li>Simple is very lenient and as a result there can be false positives (an email is labelled a valid when it is invalid).</li>
                    <li>Complex as the name suggests, is less forgiving and works for 99% cases, but it results in more false negatives (an email address is labelled as invalid when it is valid). </li>
                </ul>

                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='john@example.com' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_email'</span><span class="p">);</span>  <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='john@example.com' data-formance_algorithm='simple' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_email'</span><span class="p">);</span>  <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='john@example.com' data-formance_algorithm='complex' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_email'</span><span class="p">);</span>  <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='postbox@com' data-formance_algorithm='simple' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_email'</span><span class="p">);</span>  <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='postbox@com' data-formance_algorithm='complex' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_email'</span><span class="p">);</span>  <span class="c1">// false</span>
                    </pre>
                </div>

            </div>






            <div class='field' id='credit_card_cvc'>
                <h4>Credit Card CVC</h4>
                <p>
                    <input type="text" class="credit_card_cvc" pattern="\d*" x-autocompletetype="cc-csc" placeholder="Security code" required autocomplete="off">
                </p>

                <p>
                    Formats the credit card cvc:
                </p>
                <ul>
                    <li>Limits to length of 4</li>
                    <li>Restricts input to numbers</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.credit_card_cvc'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_credit_card_cvc'</span><span class="p">);</span>
                    </pre>
                </div>


                <p>
                    Validates the credit card cvc:
                </p>
                <ul>
                    <li>Validates number length between 3 and 4</li>
                    <li>Validates numbers</li>
                    <li>Checks if the data attribute <code>credit_card_type</code> exists to check if cvc matches that card's standards. </li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='123' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_cvc'</span><span class="p">);</span>        <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_cvc'</span><span class="p">);</span>       <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='123' data-credit_card_type='amex' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_cvc'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234' data-credit_card_type='amex' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_cvc'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='12345' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_cvc'</span><span class="p">);</span>      <span class="c1">// false</span>
                    </pre>
                </div>

            </div>




            <div class='field' id='credit_card_expiry'>
                <h4>Credit Card Expiry</h4>
                <p>
                    <input type="text" class="credit_card_expiry" pattern="\d*" x-autocompletetype="cc-exp" placeholder="Expires MM / YY" required maxlength="9">
                </p>

                <p>
                    Formats the credit card expiry date in the <code>mm / yyyy</code> format:
                </p>
                <ul>
                    <li>Limits to 6 numbers</li>
                    <li>Restricts input to numbers</li>
                    <li>Includes a <code>/</code> between the month & year</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre><span class="nx">$</span><span class="p">(</span><span class="s1">'input.credit_card_expiry'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_credit_card_expiry'</span><span class="p">);</span> </pre>
                </div>

                <p>
                    Validates the credit card expiry date:
                </p>

                <ul>
                    <li>Validates numbers</li>
                    <li>Validates in the future</li>
                    <li>Supports year shorthand <code>mm / yy</code>
                    </li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.credit_card_expiry'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_expiry'</span><span class="p">);</span>
                        <span class="c1">//examples</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='05 / 20' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_expiry'</span><span class="p">);</span>      <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='05 / 2020' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_expiry'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='05 / 1900' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_expiry'</span><span class="p">);</span>   <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='mm / 20' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_expiry'</span><span class="p">);</span>    <span class="c1">// false</span>
                    </pre>
                </div>

            </div>





            <div class='field' id='credit_card_number'>
                <h4>Credit Card Number</h4>
                <p>
                    <input type="text" class="credit_card_number" pattern="\d*" x-autocompletetype="cc-number" placeholder="Credit Card number" required>
                </p>

                <p>
                    Formats the credit card card number:
                </p>

                <ul>
                    <li>Limits to 16 numbers</li>
                    <li>Restricts input to numbers</li>
                    <li>Includes a space between every 4 digits</li>
                    <li>American Express formatting support</li>
                    <li>Adds a class of the card type (i.e. 'visa') to the input</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.credit_card_number'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_credit_card_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the credit card number:
                </p>
                <ul>
                    <li>Validates numbers</li>
                    <li>Validates Luhn algorithm</li>
                    <li>Validates length</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.credit_card_expiry'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_number'</span><span class="p">);</span>
                        <span class="c1">//examples</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='4242424242424242' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_number'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='4242 4242 4242 4242' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_number'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='4242-4242-4242-4242' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_number'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='4242' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_credit_card_number'</span><span class="p">);</span>   <span class="c1">// false</span>
                    </pre>
                </div>

                <p>
                    This field includes a special helper function to retrieve the credit card type. It recognizes
                </p>
                <ul>
                    <li><code>visa</code></li>
                    <li><code>mastercard</code></li>
                    <li><code>discover</code></li>
                    <li><code>amex</code></li>
                    <li><code>dinersclub</code></li>
                    <li><code>maestro</code></li>
                    <li><code>laser</code></li>
                    <li><code>unionpay</code></li>
                </ul>
                <p>
                    The function will return <code>null</code> if the card type can't be determined.
                </p>

                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">.</span><span class="nx">formance</span><span class="p">.</span><span class="nx">creditCardType</span><span class="p">(</span><span class="s1">'4242 4242 4242 4242'</span><span class="p">)</span> <span class="c1">// 'visa'</span>
                    </pre>
                </div>

            </div>







            <div class='field' id='number'>
                <h4>Numbers</h4>
                <p>
                    <input type="text" class='number' placeholder="Only Digits">
                </p>

                <h4>Numbers (Length = 5)</h4>
                <p>
                    <input type="text" class='number' placeholder="Only Digits" data-formance_length='5'>
                </p>

                <p>
                    Formats the number:
                </p>

                <ul>
                    <li>Restricts input to numbers </li>
                </ul>
                <div class="highlight">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.number'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the number:
                </p>

                <ul>
                    <li>Validates all characters are digits</li>
                    <li>If the <code>formance_length</code> data attribute exists, then it will check that the input length matches what was specified. It must be a number.</li>
                </ul>

                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234' data-formance_length=4 />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234' data-formance_length=5 />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_number'</span><span class="p">);</span> <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234a' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_number'</span><span class="p">);</span> <span class="c1">// false</span>
                    </pre>
                </div>

            </div>





            <div class='field' id='postal_code'>
                <h4>Canadian Postal Code 'A1A 1A1'</h4>
                <p>
                    <input type="text" class="postal_code" placeholder="Postal Code">
                </p>

                <p>
                    Formats the postal code in the <code>A1A 1A1</code> format:
                </p>
                <ul>
                    <li>Limits to 6 letters and numbers</li>
                    <li>Restricts to alphanumeric (letters and numbers) </li>
                </ul>
                <p>
                    According to <a href="http://stackoverflow.com/questions/1146202/canada-postal-code-validation">http://stackoverflow.com/questions/1146202/canada-postal-code-validation</a>.
                </p>

                <ul>
                    <li>First letter can't be D,I,O,Q,U,W,Z</li>
                    <li>Second letter can't be D,I,O,Q,U</li>
                    <li>Third letter can't be D,I,O,Q,U</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.postal_code'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_postal_code'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates a postal code field:
                </p>
                <ul>
                    <li><em>Does NOT validate whether it is an actual postal code, check with Canada Post if you want to be certain.</em></li>
                    <li>Validates length (after stripping away non alphanumeric characters)</li>
                    <li>Validates alternating letters and numbers</li>
                    <li>First letter can't be D,I,O,Q,U,W,Z</li>
                    <li>Second letter can't be D,I,O,Q,U</li>
                    <li>Third letter can't be D,I,O,Q,U</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='a1a1a1' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_postal_code'</span><span class="p">);</span>     <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='A1A 1A1' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_postal_code'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='a1a1' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_postal_code'</span><span class="p">);</span>        <span class="c1">// false</span>
                    </pre>
                </div>


            </div>


            <div class='field' id='ontario_drivers_license_number'>
                <h4>Ontario Driver's License Number 'A1234 - 12345 - 12345'</h4>
                <p>
                    <input type="text" class="ontario_drivers_license_number" placeholder="Ontario Driver's License Number">
                </p>

                <p>
                    Formats the Ontario Driver's License Number in the format <code>A1234 - 12345 - 12345</code>:
                </p>
                <ul>
                    <li>Limits length to 1 letter and 14 numbers</li>
                    <li>Restricts input to alphanumeric characters</li>
                    <li>Inserts a <code>-</code> every 5 characters.</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.odln'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_ontario_drivers_license_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the Ontario Driver's License Number:
                </p>
                <ul>
                    <li><em>Does NOT validate whether the driver's license number actually exists.</em></li>
                    <li>Validates length </li>
                    <li>Validates of the format 1 letter followed by 14 numbers</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='A12341234512345' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_drivers_license_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='A1234 - 12345 - 12345' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_drivers_license_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='A1234 - 12345 - 123456' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_drivers_license_number'</span><span class="p">);</span> <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='A1234 - 1234 - 12345' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_drivers_license_number'</span><span class="p">);</span> <span class="c1">// false</span>
                    </pre>
                </div>


            </div>


            <div class='field' id='ontario_photo_health_card_number'>
                <h4>Ontario Photo Health Card Number '1234 - 123 - 123 - AB'</h4>
                <p>
                    <input type="text" class="ontario_photo_health_card_number" placeholder="Ontario Photo Health Card Number">
                </p>

                <p>
                    Formats the Ontario Photo Health Card Number in the format <code>1234 - 123 - 123 - AB</code>:
                </p>

                <ul>
                    <li>Limits length to 10 numbers and 2 letters</li>
                    <li>Restricts input to alphanumeric characters</li>
                    <li>Inserts a <code>-</code> after the first 4 characters, and every 3 characters going forward.</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.ophcn'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_ontario_photo_health_card_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the Ontario Photo Health Card Number:
                </p>
                <ul>
                    <li><em>Does NOT validate whether the health card number actually exists.</em></li>
                    <li>Validates length </li>
                    <li>Validates of the format 10 numbers followed by 2 letters</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234123123AB' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_photo_health_card_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234 - 123 - 123 - AB' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_photo_health_card_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='1234 - 123 - 123 - ABC' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_photo_health_card_number'</span><span class="p">);</span> <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='12 - 123 - 123 - AB' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_photo_health_card_number'</span><span class="p">);</span> <span class="c1">// false</span>
                    </pre>
                </div>


            </div>

            <div class='field' id='ontario_outdoors_card_number'>
                <h4>Ontario Outdoors Card Number '708158 1234567890'</h4>
                <p>
                    <input type="text" class="ontario_outdoors_card_number" placeholder="Ontario Outdoors Card Number">
                </p>

                <p>
                    Formats the Ontario Outdoors Card Number in the format <code>708158 123456789</code>:
                </p>
                <ul>
                    <li>Limits length to 15 numbers</li>
                    <li>Restricts input to numbers</li>
                    <li>All numbers begin with <code>708158</code> </li>
                    <li>Inserts a <code></code> after the standard first 6 characters.</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.oocn'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_ontario_outdoors_card_number'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the Ontario Outdoors Card Number:
                </p>
                <ul>
                    <li><em>Does NOT validate whether the outdoors card number actually exists.</em></li>
                    <li>Validates length </li>
                    <li>Validates 9 numbers after <code>708158</code> </li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='708158123456789' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_outdoors_card_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='708158 123456789' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_outdoors_card_number'</span><span class="p">);</span> <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='708158 123456789012' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_outdoors_card_number'</span><span class="p">);</span> <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='708158 123456' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_outdoors_card_number'</span><span class="p">);</span> <span class="c1">// false</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='708158 123456789abce' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_ontario_outdoors_card_number'</span><span class="p">);</span> <span class="c1">// false</span>
                    </pre>
                </div>


            </div>
            <div class='field' id='time_yy_mm'>
                <h4>Time YY / MM</h4>
                <p>
                    <input type="text" class="time_yy_mm" pattern="\d*" x-autocompletetype="time_yy_mm" placeholder="Time YY / MM" required>
                </p>
                <p>
                    Formats a time in years and months:
                </p>
                <p>
                    Useful for inputting time in years and months. For example, duration of employment or residency.
                </p>

                <ul>
                    <li>Limits to 4 numbers</li>
                    <li>Restricts input to numbers</li>
                    <li>Includes a slash between every 2 digits</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.time_yy_mm'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_time_yy_mm'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the time in years and months:
                </p>
                <ul>
                    <li>Validates numbers</li>
                    <li>Validates length</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.time_yy_mm'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_time_yy_mm'</span><span class="p">);</span>
                        <span class="c1">//examples</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='09 / 09' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_time_yy_mm'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='10 /' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_time_yy_mm'</span><span class="p">);</span>   <span class="c1">// false</span>
                    </pre>
                </div>

            </div>

            <div class='field' id='uk_sort_code'>
                <h4>Uk Sort Code</h4>
                <p>
                    <input type="text" class="uk_sort_code" pattern="\d*" x-autocompletetype="uk_sort_code" placeholder="Uk sort code" required>
                </p>

                <p>
                    Formats the UK sort code:
                </p>

                <ul>
                    <li>Limits to 6 numbers</li>
                    <li>Restricts input to numbers</li>
                    <li>Includes a dash between every 2 digits</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.uk_sort_code'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'format_uk_sort_code'</span><span class="p">);</span>
                    </pre>
                </div>

                <p>
                    Validates the UK sort code:
                </p>
                <ul>
                    <li>Validates numbers</li>
                    <li>Validates length</li>
                </ul>
                <div class="highlight highlight-javascript">
                    <pre>
                        <span class="nx">$</span><span class="p">(</span><span class="s1">'input.uk_sort_code'</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_uk_sort_code'</span><span class="p">);</span>
                        <span class="c1">//examples</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='09 - 09 - 09' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_uk_sort_code'</span><span class="p">);</span>   <span class="c1">// true</span>
                        <span class="nx">$</span><span class="p">(</span><span class="s2">"<input value='00 -' />"</span><span class="p">).</span><span class="nx">formance</span><span class="p">(</span><span class="s1">'validate_uk_sort_code'</span><span class="p">);</span>   <span class="c1">// false</span>
                    </pre>
                </div>

            </div>


        </section>
        <footer>
            <p>
                This project is maintained by <a href="http://omarshammas.com">Omar Shammas</a>
            </p>
            <p>
                <small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small>
            </p>
        </footer>
    </div>
</body>
</html>


立即下载jquery.formance.min.js查看所有js插件

网友评论0

程序员在线工具箱