溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js如何仿網易實現表單驗證功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
來圖鎮樓！
html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>網易新用戶注冊頁面</title>
<script type="text/javascript" src="js/js1.js"></script>
<link href="css/style1.css" rel="external nofollow" rel="stylesheet" />
<script type="text/javascript">
function aa(){
var reg = /[\u4e00-\u9fa5]/g;/*這里本真人，已做修改*/
var name = document.getElementById("realName").value;
if(reg.test(name)==false){
alert("只能為漢字");
}else{
alert("正確");
}
}
</script>
</head>
<body>
<!--logo位置-->
<div id="header"><img src="img/register_logo.png" alt="logo"/></div>
<div id="main">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--看不見的第一行-->
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<!--看得見的第二行-->
<tr>
<td class="bg_left"></td>
<td class="content">
<!--表單提交，因本真人是解析來著，算不出網易服務器地址，就不詳細介紹了-->
<form action="" method="post" name="myform" onsubmit="return checkForm()">
<!--居然采用自定義列表，嘿嘿-->
<dl>
<dt>通行證用戶名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()"/>@163.com</dd>
<div id="userNameId"></div><!--這里當做提示框！-->
</dl>
<dl>
<dt>登錄密碼：</dt>
<dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重復登錄密碼：</dt><!--這里只有onblur:用戶使用邏輯使然-->
<dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性別：</dt><!--性別這里居然不給設置驗證，就一個默認，本真人有點不服-->
<dd><input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女
</dd>
</dl>
<dl>
<dt>真實姓名：</dt><!--aa():這名字,本真人有點醉...-->
<dd><input type="text" id="realName" class="inputs" onblur="aa()"/></dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>昵稱：</dt><!--解析到這里本真人終于明白了為什么有些input沒有onfocus:有onfocus的是為了讓表單上彈出，本真人一直認為很風騷的提示！-->
<dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>關聯手機號：</dt>
<dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()"/></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密郵箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()"/></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt><!--輸入框為image類型的還真不常見-->
<dd><input name=" " type="image" src="img/button.png"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<!--看不見的第三行-->
<tr>
<td class="bg bg_end_left"></td>
<td class="bg bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</div>
</body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何仿網易實現表單驗證功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
