1.首先，我們需要設置表單的驗證規則。
2.然後根據表單的驗證規則定義要顯示的驗證消息。
3.最後結合JavaScript和CSS隱藏所有預定義的驗證消息，然後根據表單中的輸入是否符合驗證規則來控制驗證消息的隱藏狀態。
我們通過壹個具體的例子來說明壹下。可以直接把這個例子放到瀏覽器裏看效果，但是要註意代碼裏對第三方類庫jQuery的引用。您應該在運行時自己設置它:
& lt！doctype html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset = " utf-8 "/& gt；
& lttitle & gt表單:驗證提示
//設置壹些必要的樣式，比如驗證消息的文本樣式，控制驗證消息可見性的樣式。
& ltstyle & gt
輸入:有效{
背景:# fff
}
輸入:無效{
背景:# fcc
顏色:# 333；
}
。驗證-消息{
保證金-底部:15px；
}
。驗證-消息跨度{
字體大小:0.8微米；
背景色:# eee
填充:6px
邊框:1px實心# ccc
邊框-半徑:10px；
顏色:# 666；
}
//所有具有類屬性hide的元素都將被隱藏。
。隱藏{
顯示:無；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& lt文章& gt
& lth 1 & gt；表單& ltspan & gt-驗證提示
& lt/article & gt；
& ltdiv id = " result-stub " class = " well hidden " >
& ltform id = " change-email-form " name = " change-email-form " & gt；
& lt字段集& gt
& lth4 & gt修改電子郵件地址
//設置表單應遵循的驗證規則。
//pattern屬性:指定用於驗證輸入字段的模式。
//maxlength屬性:根據字符數指定輸入字段的最大長度。
//required attribute:指定輸入元素是必需元素。
& lt標簽& gt用戶名:
& lt輸入類型= "文本"名稱= "用戶名"
id= "用戶名"模式="[a-zA-Z ]{5，} "
maxlength="30" required />
//設置表單的驗證消息，並結合class屬性樣式隱藏。
& ltdiv & gt
//此處data-rule的屬性值是HTML5表單內置的驗證規則之壹。
& lt跨度數據-規則= "值缺失"
class="hide " >用戶名不能為空。
& ltspan data-rule="patternMismatch "
class="hide " >必須是字母字符(長度應為5~30個字符)。
& lt/div & gt；
& lt標簽& gt電子郵件地址:
//設置表單應遵循的驗證規則。
& lt輸入type = " email " name = " email " id = " email "
title= "需要電子郵件地址"必填/>
//設置表單的驗證消息，並結合class屬性樣式隱藏。
& ltdiv & gt
& ltspan data-rule="valueMissing " >
電子郵件地址不能為空。
& ltspan data-rule="typeMismatch " >
郵箱格式不正確。
& lt/div & gt；
& ltHR/>；
//設置兩個按鈕，用於“清空表單內容和驗證表單內容”。
& lt按鈕類型= "提交" id= "提交"
name = " submit " & gt修改
& ltbutton type = " button " id = " check validation "
name="checkValidation "
class="btn " >核實
& lt/fieldset & gt；
& lt/form & gt；
& lt/div & gt；
& lt腳本& gt
window.onload= function() {
// -
//創建驗證規則容器。
var rule names =[]；
//填充驗證規則容器。
//找到所有帶有有效性規則的元素，然後將該元素的data-rule屬性值添加到有效性規則數組中。
$("[數據規則]")。每個(函數(I，元素){
var rule name = element . get attribute(' data-rule ')；
如果($。inArray(ruleName，rule names)& lt；0) {
rule names . push(rule name)；
}
});
定義變量
//首先確保用戶界面隱藏所有驗證消息。
//然後在選定的表單上運行有效性規則。
validate = function() {
$(".驗證-消息跨度”)
。add class(“hide”)；
document.getElementById('更改-電子郵件-表單')
。check validity()；
},
//查詢每個輸入元素，確定哪個元素無效。
//壹旦檢測到無效元素，遍歷驗證規則，找出無效的原因，然後通過消息提示用戶。
驗證失敗=函數(e) {
定義變量
element = e.srcElement，
有效性= element.validity
如果(！validity.valid) {
rule names . foreach(function(rule name){
checkRule(有效性，
規則名稱，
元素)；
});
e . prevent default()；
}
},
//使用input元素的ValidityState對象的實例來運行驗證規則。
//如果該驗證規則返回TRUE，則表示無法通過驗證，表單中會有相應的提示信息。
checkRule = function(state，ruleName，ele) {
if (state[ruleName]) {
$(ele)。下壹個()
。查找('[data-rule= ')
+ ruleName + '"]')
。remove class(' hide ')；
}
};
//所有驗證事件處理程序都附加到input元素，而不是button元素。
$(':input:not(:button)')。each(function() {
this . on invalid = validation fail；
this.onblur = validate
});
$('#checkValidation ')。單擊(驗證)；
}
& lt/script & gt；
& lt腳本src= "../js/jquery . js " & gt；& lt/script & gt；
& lt/body & gt；
& lt/html & gt；
推薦妳去教程網站學習壹次相關知識，希望對妳有幫助。