javascript用戶輸入數(shù)據(jù)驗證：附案例，代碼

、知識點

1、JS支持事件處理業(yè)務(wù)邏輯模型，常用事件

Click 單擊

Dblclick 雙擊

Focus 聚焦

Blur 失去焦點

Mouseover 鼠標懸停

Mousemove 鼠標移動

Mouseout 鼠標移開

Change 改變

Load 頁面加載

Keydown 鍵按下

2、調(diào)用

找到對應(yīng)的標簽，加上屬性 on事件關(guān)鍵字=”JS代碼”。一般調(diào)用的JS代碼邏輯很復雜，會用函數(shù)封裝。

3、DOM操作：Document Object Model，文檔對象模型。網(wǎng)頁文檔由一個個的HTML標簽組成，操作網(wǎng)頁組成元素（標簽）。

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

4、表單提交

方式一：document.getElementById("form1").submit();

方式二：提交按鈕類型設(shè)置為submit，調(diào)用的函數(shù)必須要有一個返回值，返回false不提交，true提交；調(diào)用函數(shù)時前面再加個return 關(guān)鍵字。

5、回車驗證的實現(xiàn)。利用用戶敲擊鍵盤判斷用戶按下的是回車鍵調(diào)用檢測函數(shù)即可。

6、事件參數(shù)：event代表對應(yīng)的標簽執(zhí)行的動作。比如文本框按下鍵判斷是不是回車

Onkeydown=”Test(event);”
<script>
function Test(e){
var e=e||window.event;
if(e.keyCode==13){}
}
</script>

鼠標懸停，顯示該位置坐標（相對）

Onmouseover=”alert(event.clientX+”|”+event.clientY);”

二、表單驗證

示例源碼：

<html>
<head><title>XXX 用戶注冊</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form name="form1" id="form1" action="register.php" method="post">
<table>
<caption><h3>用戶注冊</h3></caption>
<tr><th>用戶名：</th><td><input onKeyDown="EnterCheck(event);" name="loginid" id="loginid" placeholder="請輸入用戶名" /></td></tr>
<tr><th>密碼：</th><td><input name="pwd" id="pwd" type="password" placeholder="請輸入密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>確認密碼：</th><td><input name="repwd" id="repwd" type="password" placeholder="請輸入確認密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>昵稱：</th><td><input type="text" name="uname" id="uname" placeholder="請輸入昵稱" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>性別：</th><td><input type="radio" checked id="sex" name="sex" />男<input name="sex" type="radio" id="sex" />女
</td></tr>
<tr><th>喜歡的顏色：</th><td>
<select name="ucolor" id="ucolor">
<option selected value="0">==請選擇==</option>
<option value="red">--紅色--</option>
<option value="green">--綠色--</option>
<option value="blue">--藍色--</option>
</select>
</td></tr>
<tr><th>愛好：</th><td><input value="playcomputer" name="cbof[]" id="cbof[]" type="checkbox">玩電腦
<input type="checkbox" value="readingbook" name="cbof[]" id="cbof[]" >看書
<input type="checkbox" value="dosporting" name="cbof[]" id="cbof[]">做運動
</td></tr>
<tr><th>個人簡介：</th><td>
<textarea rows="4" name="describe" id="describe" onKeyDown="EnterCheck(event);"></textarea>
</td></tr>
<tr><td></td><td>
<input type="button" value="提交" onClick="return CheckInput();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//驗證用戶輸入
function CheckInput(){
var result=false;
//獲取用戶名文本框?qū)ο?/p>
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
if(CheckIsSafeInputText(loginid,"用戶名")){}
else if(CheckIsSafeInputText(pwd,"密碼")){}
else if(repwd.value!=pwd.value){
alert("密碼與確認密碼不一致");
repwd.focus();
}
else if(CheckIsSafeInputText(uname,"昵稱")){}
else if(ucolor.value=="0"){
alert("請至少選擇一個喜歡的顏色");
ucolor.focus();
}
else if(describe!=null && describe.value.length>256){
alert("個人簡介不得超出256個字符");
describe.focus();
}
else
//document.getElementById("form1").submit();
result=true;
return result;
}
//驗證文本框是否合法，非法返回true，合法返回false
function CheckIsSafeInputText(obj,msg){
var result=true;
if(obj==null || obj.value=="")
{
alert(msg+"不得為空");//+為字符串連接符
obj.focus();
}
else if(obj.value.length<4 || obj.value.length>16){
alert(msg+"長度在4~16個字符以內(nèi)");
obj.focus();
}
else
result=false;
return result;
}
//回車驗證
function EnterCheck(e){
var e=e || window.event;
if(e.keyCode==13)
CheckInput();
}
</script>
</html>

三、JS外鏈

JS的代碼抽出去作為一個單獨的文件，命名要對應(yīng)，相應(yīng)的頁面通過<script language="javascript" type="text/javascript" src="相對路徑"></script>來調(diào)用

現(xiàn)代網(wǎng)站開發(fā)中，代碼驗證在確保頁面符合 Web 標準方面至關(guān)重要。 W3C 驗證是代碼驗證的行業(yè)標準，用于檢查頁面是否符合這些標準。

W3C 驗證的類型

W3C 驗證有兩種類型：

XHTML 驗證：檢查 HTML 代碼的語法和結(jié)構(gòu)。
CSS 驗證：檢查 CSS 代碼的語法和語義。

使用 W3C 驗證器

您可以使用 W3C 驗證器在線或本地進行驗證。在線驗證器可以找到 W3C 驗證器的地址：

W3C 頁面驗證器：https://validator.w3.org/

驗證的步驟

將您的頁面保存為 HTML 或 CSS 文件。
在驗證器頁面中輸入頁面 URL。
點擊“Validate This Page” 按鈕。 4 vicisslet akan menunjukkan驗證結(jié)果。

常見的驗證錯誤

語法錯誤：語法錯誤，例如不正確的標簽或?qū)傩浴?/li>
結(jié)構(gòu)錯誤：結(jié)構(gòu)錯誤，例如缺少根元素或無效的嵌套。
內(nèi)容錯誤：內(nèi)容錯誤，例如不正確的屬性值或不正確的標簽使用。

解決驗證錯誤

了解驗證錯誤的含義。
檢查代碼以找到導致錯誤的代碼行。
按照 W3C 標準修正錯誤。

結(jié)論

W3C 驗證是確保頁面符合 Web 標準的必不可少步驟。通過使用 W3C 驗證器和了解驗證錯誤，您可以確保您的頁面符合行業(yè)標準并提供最佳的用戶體驗。

MValidator是一個易用、輕量且強大的表單驗證工具。支持html和javascript兩種配置方式，可以立即或手動觸發(fā)驗證，獨立顯示每條規(guī)則的信息，可自定義表單或信息容器的樣式。目前minify文件還不到5KB，而且不依賴任何第三方庫。

使用方法：

1. 給input指定驗證規(guī)則

<!--使用data-rule屬性指定驗證規(guī)則-->
<input type="text" data-rule="required">

或者使用js配置

//fields字段與input的name對應(yīng)，指定這個input的驗證規(guī)則
//<input type="text" name="field1">
new SMValidator('form', {
    fields:{
        field1: 'required'
    }
});

2. 綁定需要驗證的表單

selector是css選擇器，內(nèi)部使用document.querySelectorAll解析，你可以使用瀏覽器支持的任何css選擇器規(guī)則。SMValidator從選擇結(jié)果中篩選出指定的input進行綁定，并在適當?shù)臅r機較驗其value是否符合要求。

其他詳細的功能請到移步到github上查看文檔和demo源碼，可以實現(xiàn)很多自定義效果

在線咨詢

上一篇：用Html+CSS制作一團火焰
下一篇：xGallerify輕量級響應(yīng)式j(luò)Query圖片布局插件

您的項目需求

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

整合營銷服務(wù)商

javascript用戶輸入數(shù)據(jù)驗證：附案例，代碼

、知識點

二、表單驗證

三、JS外鏈

您的項目需求