Slog51_支配jQuery框架之表單驗證_插件validate

時間 2019-12-12

標籤 slog51 slog 支配 jquery 框架表單驗證插件 validate 欄目 JQuery 简体版

原文原文鏈接

ArthurSlog
SLog-51
Year·1
Guangzhou·China
Aug 28th 2018

現實就是答案就算抱怨生不逢時社會不公也不會有任何改變css

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

開始編碼

jQuery說白了就是一堆js代碼，運行在瀏覽器環境下的js代碼
首先理一下思路：

引入js插件（jQuery插件）
在script裏，也就是 js文件裏調用插件，或者換種說法就是調用插件裏寫好的方法
查看 js插件的說明手冊，讓 html文件裏的元素和 js文件相關聯，這樣就能夠在 js文件裏去操控 html文件了

咱們須要準備三份插件一份 html文件（js、css、html寫在一份文件裏）

1.主頁： index.html
2.插件： jQuery.js
3.插件： jquery.validate.js
4.jquery.validate.js的配置文件：messages.js

其中插件： jQuery.js 和插件： jquery.validate.js 去官網下載
插件： jquery.validate.js 的配置文件 message.js 以下：

message.jshtml

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語, 漢語)
 */
$.extend($.validator.messages, {
    required: "這是必填字段",
    remote: "請修正此字段",
    email: "請輸入有效的電子郵件地址",
    url: "請輸入有效的網址",
    date: "請輸入有效的日期",
    dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
    number: "請輸入有效的數字",
    digits: "只能輸入數字",
    creditcard: "請輸入有效的信用卡號碼",
    equalTo: "你的輸入不相同",
    extension: "請輸入有效的後綴",
    maxlength: $.validator.format("最多能夠輸入 {0} 個字符"),
    minlength: $.validator.format("最少要輸入 {0} 個字符"),
    rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
    range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),
    max: $.validator.format("請輸入不大於 {0} 的數值"),
    min: $.validator.format("請輸入不小於 {0} 的數值")
});

}));

主頁 html文件以下：

index.htmljquery

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ArthurSlog</title>
    <script src="jquery.js"></script>
    <script src="jquery.validate.js"></script>
    <script src="messages.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function () {
                alert("提交事件!");
            }
        });
        $().ready(function () {
            $("#Form").validate();
        });
    </script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <form id="Form" method="get" action="">
        <fieldset>
            <legend>輸入您的名字，郵箱，URL，備註。</legend>
            <p>
                <label for="cname">Name (必需, 最少3個字母)</label>
                <input id="cname" name="name" minlength="3" type="text" required>
            </p>
            <p>
                <label for="cemail">E-Mail (必需)</label>
                <input id="cemail" type="email" name="email" required>
            </p>
            <p>
                <label for="curl">URL (可選)</label>
                <input id="curl" type="url" name="url">
            </p>
            <p>
                <label for="ccomment">備註 (必需)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </fieldset>
    </form>
</body>

</html>