Web前端培訓(xùn)：一些常見的HTML代碼驗證器

許多“代碼驗證器”可以幫助你找出代碼中的問題。HTML代碼驗證程序驗證標(biāo)記是否已關(guān)閉和嵌套，是否使用了正確的DOCTYPE，以及標(biāo)記是否正確使用。CSS代碼驗證程序驗證是否缺少大括號，以及CSS屬性名稱和值是否已正確使用。對HTML感興趣的同學(xué)可以參加Web前端培訓(xùn)，在專業(yè)老師的指導(dǎo)下，可以獲得高效的學(xué)習(xí)。

下面給出了一些常見的HTML代碼驗證程序：

1. W3C驗證標(biāo)記服務(wù)–這是驗證HTML代碼最常用的服務(wù)。你可以通過指向URI（通用資源標(biāo)識符）或上載包含源代碼的文件或直接在其網(wǎng)站上輸入代碼來驗證代碼。

2. JS Formatter–如果你想通過將HTML代碼“復(fù)制并粘貼”到在線編輯器中來實(shí)時測試HTML代碼，你可以使用JS Formatter。除了驗證HTML之外，你還可以選擇格式化未對齊的源代碼。

3. Free Formatter–此免費(fèi)工具可用于驗證HTML代碼是否符合W3C標(biāo)準(zhǔn)，并修復(fù)問題以提高代碼質(zhì)量。你可以選擇將HTML代碼粘貼到網(wǎng)站提供的輸入文本區(qū)域，或?qū)?/span>HTML代碼上載到其驗證服務(wù)器上。在Web前端培訓(xùn)中，既有全面系統(tǒng)的理論課程，還有大量實(shí)戰(zhàn)項目，都是緊跟市場和企業(yè)需求，讓你學(xué)到最新最全的知識和技能。

除了驗證器之外，你還可以使用代碼過濾器來指出編程錯誤，并消除由于錯誤編程實(shí)踐而出現(xiàn)的警告。

4. DirtyMarkup Formatter–這是一個免費(fèi)工具，用于清理格式化、首選行長度和縮進(jìn)的錯誤代碼。除了HTML代碼外，DirtyMarkup格式化程序還可以用于JS（JavaScript）和CSS代碼。

5. CSS Lint–這個鏈接器專門用于linting CSS代碼。

6. JS Lint–這個鏈接器專門用于linting JS代碼。

雖然這些都是一些流行的選項，但在某些情況下，你可能不愿意將源代碼上載到“某個服務(wù)器”上，該服務(wù)器負(fù)責(zé)代碼美化和過濾。許多IDE都有各種各樣的插件，可以簡化源代碼的篩選工作。Atom和Notepad++linter是開發(fā)人員常用的linter選項。想學(xué)習(xí)前端更多技能，建議考慮參加Web前端培訓(xùn)，可以在短時間獲得快速提升，有效提高前端開發(fā)工作效率。

了解更多

VSCode中，有許多與HTML相關(guān)的插件可以大大提高開發(fā)效率和便利性。以下是一些值得推薦的插件，它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您更好地編寫、調(diào)試和預(yù)覽HTML代碼。

1. HTML Snippets: 這個插件提供了許多HTML代碼片段，可以幫助您快速編寫常見的HTML結(jié)構(gòu)和元素。只需輸入簡短的縮寫，即可自動生成相應(yīng)的HTML代碼，大大提高了編寫速度。

2. Emmet: Emmet是一個強(qiáng)大的代碼生成器，支持多種編程語言，包括HTML。通過簡單的縮寫和語法，您可以快速生成復(fù)雜的HTML結(jié)構(gòu)和嵌套元素。Emmet還提供了許多自定義選項，可以根據(jù)您的需求進(jìn)行靈活配置。

3. HTML Boilerplate: 這個插件提供了一個HTML模板，包含了常見的HTML結(jié)構(gòu)和元素，如文檔類型聲明、字符編碼、頭部信息等。使用這個插件，您可以快速創(chuàng)建一個基本的HTML框架，然后在此基礎(chǔ)上進(jìn)行進(jìn)一步的開發(fā)。

4. HTML Preview: HTML Preview插件可以在VSCode中實(shí)時預(yù)覽HTML代碼的效果。您只需在編輯器中打開HTML文件，然后點(diǎn)擊預(yù)覽按鈕，即可在側(cè)邊欄中查看HTML頁面的渲染效果。這對于調(diào)試和預(yù)覽HTML代碼非常方便。

5. Color Highlight: Color Highlight插件可以自動識別HTML代碼中的顏色值，并在編輯器中高亮顯示。這使得您更容易發(fā)現(xiàn)和修改顏色值，提高了代碼的可讀性和可維護(hù)性。

6. HTML Boilerplate Generator: 這個插件可以幫助您快速生成HTML5的Boilerplate代碼，包括常用的meta標(biāo)簽、字符編碼、視口設(shè)置等。它還提供了一些自定義選項，可以根據(jù)您的需求生成符合規(guī)范的HTML代碼。

7. HTML CSS Support: 這個插件提供了對HTML和CSS的完整支持，包括語法高亮、代碼片段、代碼折疊等功能。它還支持自動完成和錯誤檢查，可以幫助您更高效地編寫HTML和CSS代碼。

8. HTML/CSS/JS Prettify: 這個插件可以對HTML、CSS和JavaScript代碼進(jìn)行格式化，使其更加整潔和易讀。您可以自定義格式化規(guī)則，也可以使用默認(rèn)的規(guī)則進(jìn)行快速格式化。這對于保持代碼風(fēng)格一致和提高代碼可讀性非常有幫助。

9. HTML Validator: HTML Validator插件可以對HTML代碼進(jìn)行驗證，檢查其是否符合W3C規(guī)范。它可以檢測出潛在的錯誤和不符合規(guī)范的地方，并給出相應(yīng)的提示和建議。這對于編寫符合標(biāo)準(zhǔn)的HTML代碼非常有幫助。

10. Live Server: Live Server插件可以在本地啟動一個實(shí)時服務(wù)器，讓您在瀏覽器中實(shí)時預(yù)覽HTML、CSS和JavaScript代碼的效果。它支持自動刷新和熱更新，可以實(shí)時反映代碼的變化。這對于前端開發(fā)和調(diào)試非常方便。

以上是一些值得推薦的VSCode中與HTML相關(guān)的插件。它們各自具有獨(dú)特的功能和優(yōu)點(diǎn)，可以幫助您提高開發(fā)效率和便利性。當(dāng)然，具體選擇哪些插件還需要根據(jù)您的實(shí)際需求和喜好來決定。希望這些推薦能對您有所幫助！

rom表單數(shù)據(jù)的合法性驗證是個很常見的需求，jQuery提供了一個插件：jquery validate 官網(wǎng)下載。

　　　若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。

<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="js/jquery.validate.js"></script>

　　　把現(xiàn)在寫的項目拿來演示一下，其使用了bootstrap框架。

$(function() {
    jQuery.validator.addMethod("regUserName",
    function(value, element) {       
        return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);   
    },
    "注冊昵稱為4-10位數(shù)字、下劃線、中文或英文字母，但不能全是數(shù)字");   jQuery.validator.addMethod("isMobile",
    function(value, element) {       
        var length=value.length;       
        var mobile=/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;       
        return this.optional(element) || (length==11 && mobile.test(value));   
    },
    "請正確填寫您的手機(jī)號碼");    //登錄帳號合法性驗證    jQuery.validator.addMethod("logAccountCheck", function (value, element) {        var length=value.length;        var mobile=/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;        return this.optional(element) || (length==11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value);    }, "昵稱不符合登錄規(guī)則");$("#fillForm").validate({        errorElement: 'span',        errorClass: 'help-block',        focusInvalid: false,        rules: {            new_userName: {                required: true,                regUserName: true,                minlength: 4,                maxlength: 10            },            new_userPwd: {                required: true,                rangelength: [5, 15]            },            new_userPwd_twice: {                required: true,                equalTo: "#new_userPwd"            },            new_userEmail: {                required: true,                email: true            },            new_userPhone: {                required: true,                isMobile:true,                digits: true,                minlength: 11,                maxlength: 11            },            new_userBirth: {                required: true            },            new_userCollege: {                required: true            },            new_userMajor: {                required: true            }        },        messages: {            new_userName: {                required: '昵稱不能為空',                minlength: '昵稱最少為4位',                maxlength: '昵稱最多為10位'            },            new_userPwd: {                required: '密碼不能為空',                rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間")            },            new_userPwd_twice: {                required: '此項不能為空',                equalTo: '兩次輸入的密碼必須一致'            },            new_userEmail: {                required: '郵箱不能為空',                email: '郵箱格式不正確(例如: xxx@xx.com)'            },            new_userPhone: {                required: '電話號不能為空',                digits: '電話號必須是數(shù)字',                minlength: '電話號為11位',                maxlength: '電話號為11位'            },            new_userBirth: {                required: '生日不能為空'            },            new_userCollege: {                required: '學(xué)院不能為空'            },            new_userMajor: {                required: '專業(yè)不能為空'            }        },        highlight: function (element) {            $(element).closest('.form-group').addClass('has-error');        },        success: function (label) {            label.closest('.form-group').removeClass('has-error').addClass('has-success');            label.remove();        },        errorPlacement: function (error, element) {            element.parent('div').after(error);        },        submitHandler: function (form) {            var result={                "new_userName": $("#new_userName").val(),                "new_userPwd": $("#new_userPwd").val(),                "new_userEmail": $("#new_userEmail").val(),                "new_userPhone": $("#new_userPhone").val(),                "new_userBirth": $("#new_userBirth").val(),                "new_userGender": $("input[name='new_userGender']:checked").val(),                "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val()            };            result.new_userIP=ip;            var res=JSON.stringify(result);            alert(res);            return false;        }    })})

　　　html文件跟平常一樣，主要在js中進(jìn)行驗證：

$(function() {
    jQuery.validator.addMethod("regUserName",
    function(value, element) {       
        return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);   
    },
    "注冊昵稱為4-10位數(shù)字、下劃線、中文或英文字母，但不能全是數(shù)字");   jQuery.validator.addMethod("isMobile",
    function(value, element) {       
        var length=value.length;       
        var mobile=/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;       
        return this.optional(element) || (length==11 && mobile.test(value));   
    },
    "請正確填寫您的手機(jī)號碼");    //登錄帳號合法性驗證    jQuery.validator.addMethod("logAccountCheck", function (value, element) {        var length=value.length;        var mobile=/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;        return this.optional(element) || (length==11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value);    }, "昵稱不符合登錄規(guī)則");$("#fillForm").validate({        errorElement: 'span',        errorClass: 'help-block',        focusInvalid: false,        rules: {            new_userName: {                required: true,                regUserName: true,                minlength: 4,                maxlength: 10            },            new_userPwd: {                required: true,                rangelength: [5, 15]            },            new_userPwd_twice: {                required: true,                equalTo: "#new_userPwd"            },            new_userEmail: {                required: true,                email: true            },            new_userPhone: {                required: true,                isMobile:true,                digits: true,                minlength: 11,                maxlength: 11            },            new_userBirth: {                required: true            },            new_userCollege: {                required: true            },            new_userMajor: {                required: true            }        },        messages: {            new_userName: {                required: '昵稱不能為空',                minlength: '昵稱最少為4位',                maxlength: '昵稱最多為10位'            },            new_userPwd: {                required: '密碼不能為空',                rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間")            },            new_userPwd_twice: {                required: '此項不能為空',                equalTo: '兩次輸入的密碼必須一致'            },            new_userEmail: {                required: '郵箱不能為空',                email: '郵箱格式不正確(例如: xxx@xx.com)'            },            new_userPhone: {                required: '電話號不能為空',                digits: '電話號必須是數(shù)字',                minlength: '電話號為11位',                maxlength: '電話號為11位'            },            new_userBirth: {                required: '生日不能為空'            },            new_userCollege: {                required: '學(xué)院不能為空'            },            new_userMajor: {                required: '專業(yè)不能為空'            }        },        highlight: function (element) {            $(element).closest('.form-group').addClass('has-error');        },        success: function (label) {            label.closest('.form-group').removeClass('has-error').addClass('has-success');            label.remove();        },        errorPlacement: function (error, element) {            element.parent('div').after(error);        },        submitHandler: function (form) {            var result={                "new_userName": $("#new_userName").val(),                "new_userPwd": $("#new_userPwd").val(),                "new_userEmail": $("#new_userEmail").val(),                "new_userPhone": $("#new_userPhone").val(),                "new_userBirth": $("#new_userBirth").val(),                "new_userGender": $("input[name='new_userGender']:checked").val(),                "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val()            };            result.new_userIP=ip;            var res=JSON.stringify(result);            alert(res);            return false;        }    })})

　　　簡單用法：

　　　1.：rules里定義輸入框規(guī)則，常見的有required, minlength, maxlength, email, 其中使用輸入框的name屬性來指定輸入框。

　　　2：messages里定義當(dāng)輸入內(nèi)容不符合規(guī)則時顯示的信息，如果自定義則顯示默認(rèn)的錯誤信息。

　　　3：可以自定義規(guī)則，比如上面代碼開頭部分定義了自定義規(guī)則，可以根據(jù)自己的需求仿照代碼即可，而且網(wǎng)上也提供了現(xiàn)成的自定義驗證規(guī)則。

　　　4：當(dāng)輸入框均符合規(guī)則時，可以點(diǎn)擊提交，此時，會指定submitHandler函數(shù)。

在線咨詢

上一篇：前端需要知道的冷知識2 input - margin
下一篇：H5游戲的山寨坑，繞不過只能跳了

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web前端培訓(xùn)：一些常見的HTML代碼驗證器

您的項目需求