Web前端開發(fā)技術項目教程課件 4.3.1知識點1：數(shù)據(jù)驗證VIP

信息安全技術應用ApplicationofInformationSecurityTechnology數(shù)據(jù)驗證《前端技術開發(fā)》前端技術開發(fā)目錄required屬性1特殊格式驗證2pattern屬性31required屬性required屬性1使用required屬性來強制用戶填寫表單字段。<formaction="/register"method="post"><labelfor="username">用戶名:</label><inputtype="text"name="loginname"required><labelfor="password">密碼:</label><inputtype="password"name="password"required><inputtype="submit"value="注冊"></form>當用戶試圖提交表單時，如果任何帶有required屬性的字段未被填寫，瀏覽器將不會提交表單并顯示一個錯誤消息。2特殊格式驗證特殊格式驗證2文件選擇框允許用戶選擇文件并進行上傳。然而，有時候我們需要對用戶上傳的文件類型進行限制，以確保上傳的文件符合我們的需求。為此，我們可以使用accept屬性來指定允許上傳的文件類型。<inputtype="file"accept="image/*">在這個例子中，accept屬性值為“image/*”。其中，前綴“image”表示我們希望允許上傳的文件類型為圖片；后綴“*”表示允許所有圖片格式的后綴名。這意味著，用戶在選擇文件時，只有圖片格式的文件才能被上傳。特殊格式驗證2常用的accept屬性值屬性含義image圖片文件：jpg、gif、png……audio音頻：mp3、wav……video視頻：mp4、avi……text文本：txt、csv、html……application應用文件：zip、pdf、doc……特殊格式驗證2HTML5為表單提供了更多的輸入類型，以下是幾種新增的類型：類型作用<inputtype="tel">用于輸入電話號碼。用戶可以在輸入框中直接輸入電話號碼，而無需輸入特殊的格式。<inputtype="email">用于輸入電子郵件地址。瀏覽器通常會驗證電子郵件地址的格式是否正確。<inputtype="url">用于輸入網(wǎng)址。瀏覽器通常會驗證網(wǎng)址是否有效。<inputtype="number">用于輸入數(shù)字。用戶可以輸入數(shù)字、小數(shù)或使用上下箭頭來選擇數(shù)字。3pattern屬性pattern屬性3pattern屬性允許你定義一個正則表達式，以限制用戶在輸入字段中輸入的內容。<inputtype="tel"name="phone"requiredpattern="^1[3-9]\d{9}$">pattern屬性只對“text”、“search”、“url”、“tel”和“email”類型的input元素有效。pattern屬性3正則表達式“^1[3-9]\d{9}$”解釋如下：^：保匹配的字符串必須從開始位置開始。1：這個部分表示字符串必須以數(shù)字`1`開始。[3-9]：這個部分表示下一個字符必須是數(shù)字3到9之間的任意一個數(shù)字。也就是說，它可以是3、4、5、6、7、8或9。\d{9}：所以這部分表示接下來的9個字符都必須是數(shù)字。$：確保匹配的字符串必須以這個模式結束。所以，整個正則表達式的意思是