用js實(shí)現(xiàn)用戶注冊(cè)功能
更新時(shí)間：2021年09月22日 10:05:20 作者：lemon1juice
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)用戶注冊(cè)的簡(jiǎn)潔版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)用戶注冊(cè)功能的具體代碼，供大家參考，具體內(nèi)容如下
1.HTML代碼結(jié)構(gòu)
<BODY>
<FORM action="success.html" method="post" name="myform" onSubmit="return checkForm()">
<TABLE border="0" cellpadding="0" cellspacing="0" align="center">
<TR>
<TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
</TR>
<TR>
<TD width="107" height="36">用戶名：</TD>
<TD width="524"><INPUT name="txtUser" type="text" maxlength="16">只能輸入字母或數(shù)字，4-16個(gè)字符</TD>
</TR>
<TR>
<TD width="107" height="36">密碼：</TD>
<TD width="524"><INPUT name="txtPass" type="password">密碼長(zhǎng)度6-12位</TD>
</TR>
<TR>
<TD width="107" height="36">確認(rèn)密碼：</TD>
<TD width="524"><INPUT name="txtRPass" type="password"></TD>
</TR>
<TR>
<TD width="107" height="36">性別：</TD>
<TD width="524">
<INPUT name="gen" type="radio" value="男" checked>男
<INPUT name="gen" type="radio" value="女" class="input">女
</TD>
</TR>
<TR>
<TD width="107" height="36">電子郵件地址：</TD>
<TD width="524"><INPUT name="txtEmail" type="text">
輸入正確的Email地址</TD>
</TR>
<TR>
<TD width="107" height="36">出生日期：</TD>
<TD width="524">
<INPUT name="year" id="year" size=4 maxlength=4 > 年
<SELECT name="month" >
<OPTION value=1>一月</OPTION>
<OPTION value=2>二月</OPTION>
<OPTION value=3>三月</OPTION>
<OPTION value=4>四月</OPTION>
<OPTION value=5>五月</OPTION>
<OPTION value=6>六月</OPTION>
<OPTION value=7>七月</OPTION>
<OPTION value=8>八月</OPTION>
<OPTION value=9>九月</OPTION>
<OPTION value=10>十月</OPTION>
<OPTION value=11>十一月</OPTION>
<OPTION value=12>十二月 </OPTION>
</SELECT> 月
<SELECT name="day" >
<OPTION value=1>1</OPTION><OPTION value=2>2</OPTION><OPTION value=3>3</OPTION><OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION><OPTION value=6>6</OPTION><OPTION value=7>7</OPTION><OPTION value=8>8</OPTION>
<OPTION value=9>9</OPTION><OPTION value=10>10</OPTION><OPTION value=11>11</OPTION><OPTION value=12>12 </OPTION>
<OPTION value=13>13</OPTION><OPTION value=14>14</OPTION><OPTION value=15>15</OPTION><OPTION value=16>16</OPTION>
<OPTION value=17>17</OPTION><OPTION value=18>18</OPTION><OPTION value=19>19</OPTION><OPTION value=20>20</OPTION>
<OPTION value=21>21</OPTION><OPTION value=22>22</OPTION><OPTION value=23>23</OPTION><OPTION value=24>24</OPTION>
<OPTION value=25>25</OPTION><OPTION value=26>26</OPTION><OPTION value=27>27</OPTION><OPTION value=28>28</OPTION>
<OPTION value=29>29</OPTION><OPTION value=30>30</OPTION><OPTION value=7>31</OPTION>
</SELECT> 日
</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<INPUT type="submit" value="同意以下協(xié)議條款并提交">
</TD>
</TR>
<TR>
<TD colspan="2">
<TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">
一、總則
1．1 用戶應(yīng)當(dāng)同意本協(xié)議的條款并按照頁(yè)面上的提示完成全部的注冊(cè)程序。用戶在進(jìn)行注冊(cè)程序過(guò)程中點(diǎn)擊"同意"按鈕即表示用戶與百度公司達(dá)成協(xié)議，完全接受本協(xié)議項(xiàng)下的全部條款。
1．2 用戶注冊(cè)成功后，百度將給予每個(gè)用戶一個(gè)用戶帳號(hào)及相應(yīng)的密碼，該用戶帳號(hào)和密碼由用戶負(fù)責(zé)保管；用戶應(yīng)當(dāng)對(duì)以其用戶帳號(hào)進(jìn)行的所有活動(dòng)和事件負(fù)法律責(zé)任。
1．3 用戶可以使用百度各個(gè)頻道單項(xiàng)服務(wù)，當(dāng)用戶使用百度各單項(xiàng)服務(wù)時(shí)，用戶的使用行為視為其對(duì)該單項(xiàng)服務(wù)的服務(wù)條款以及百度在該單項(xiàng)服務(wù)中發(fā)出的各類公告的同意。
1．4 百度會(huì)員服務(wù)協(xié)議以及各個(gè)頻道單項(xiàng)服務(wù)條款和公告可由百度公司隨時(shí)更新，且無(wú)需另行通知。您在使用相關(guān)服務(wù)時(shí),應(yīng)關(guān)注并遵守其所適用的相關(guān)條款。
您在使用百度提供的各項(xiàng)服務(wù)之前，應(yīng)仔細(xì)閱讀本服務(wù)協(xié)議。如您不同意本服務(wù)協(xié)議及/或隨時(shí)對(duì)其的修改，您可以主動(dòng)取消百度提供的服務(wù)；您一旦使用百度服務(wù)，即視為您已了解并完全同意本服務(wù)協(xié)議各項(xiàng)內(nèi)容，包括百度對(duì)服務(wù)協(xié)議隨時(shí)所做的任何修改，并成為百度用戶。
</TEXTAREA>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
注意圖片需要你自己添加
2.JS代碼結(jié)構(gòu)
<SCRIPT type="text/javascript" language="javascript">
function checkForm(){
if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
return true;
}else{
return false;
}
}
//用戶名非空驗(yàn)證+長(zhǎng)度驗(yàn)證+合法性驗(yàn)證
function checkUserName(){
var name = document.myform.txtUser;
if(name.value==""){
alert("請(qǐng)輸入用戶名");
name.focus();
return false;
}else if(name.value.length<4||name.value.length>16){//用戶名長(zhǎng)度驗(yàn)證
alert("用戶名輸入的長(zhǎng)度4-16個(gè)字符");
name.select();
return false;
}
//用戶名輸入合法性驗(yàn)證
for(var i=0;i<name.value.length;i++)
{
var charTest=name.value.toLowerCase().charAt(i);
if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') )
{
alert("會(huì)員名包含非法字符，只能包括 a-z、0-9 和下劃線");
name.select();
return false;
}
}
return true;
}
//密碼非空驗(yàn)證+確認(rèn)驗(yàn)證+長(zhǎng)度驗(yàn)證
function checkPass(){
var pass=document.myform.txtPass;
var rpass=document.myform.txtRPass;
if(pass.value==""){
alert("密碼不能為空");
pass.focus();
return false;
}else if(pass.value.length<6||pass.value.length>12){
alert("密碼長(zhǎng)度為6-12個(gè)字符");
pass.select();
return false;
}
//確認(rèn)密碼一致性驗(yàn)證
if(rpass.value!=pass.value){
alert("確認(rèn)密碼與密碼輸入不一致");
rpass.select();
return false;
}
return true;
}
//電子郵件驗(yàn)證
function checkEmail(){
var strEmail=document.myform.txtEmail;
if (strEmail.value.length==0)
{
alert("電子郵件不能為空!");
strEmail.focus();
return false;
}else if (strEmail.value.indexOf("@",0)==-1)
{
alert("電子郵件格式不正確\n必須包含@符號(hào)！");
strEmail.select();
return false;
}else if (strEmail.value.indexOf(".",0)==-1){
alert("電子郵****---件格式不正確\n必須包含.符號(hào)！");
strEmail.select();
return false;
}//@和.字符不能在句首
else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
alert("符號(hào)@和符號(hào).不能在郵件地址第一位");
strEmail.select();
return false;+
}//@和.字符不能在句尾
else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
alert("符號(hào)@和符號(hào).不能在郵件地址最后一位");
strEmail.select();
return false;
}
return true;
}
//驗(yàn)證出生年份
function checkDate(){
var year = document.myform.year;
var time=new Date();
if(year.value==""){//非空驗(yàn)證
alert("請(qǐng)輸入出生年份");
year.focus();
return false;
}else if(isNaN(year.value)){//是否是數(shù)字驗(yàn)證
alert("請(qǐng)輸入數(shù)字");
year.focus();
return false;
}else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//輸入范圍驗(yàn)證
alert("年份范圍從1949-"+time.getYear()+"年");
year.select();
return false;
}else{
return true;
}
}
</SCRIPT>
3.效果展示如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼
- 用戶注冊(cè)常用javascript代碼
- JS實(shí)現(xiàn)用戶注冊(cè)時(shí)獲取短信驗(yàn)證碼和倒計(jì)時(shí)功能
- php用戶注冊(cè)頁(yè)面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- 用于判斷用戶注冊(cè)時(shí)，密碼強(qiáng)度的JS代碼
- 在jsp中用bean和servlet聯(lián)合實(shí)現(xiàn)用戶注冊(cè)、登錄
- javascript用戶注冊(cè)提示效果的簡(jiǎn)單實(shí)例
- 快速搭建Node.js(Express)用戶注冊(cè)、登錄以及授權(quán)的方法
- Nodejs實(shí)現(xiàn)用戶注冊(cè)功能
- js實(shí)現(xiàn)用戶注冊(cè)協(xié)議倒計(jì)時(shí)的方法
相關(guān)文章
微信小程序的出現(xiàn)給我們提供了一種使用應(yīng)用的新方式和體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于uniapp打包成微信小程序的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
在面試過(guò)程中經(jīng)常被面試官問到這樣的題目：如何判斷數(shù)組？下面小編就針對(duì)這個(gè)問題給大家收集整理了份資料，感興趣的朋友一起看看吧2017-10-10
fullpage.js全屏滾動(dòng)插件使用實(shí)例
這篇文章主要介紹了fullpage.js全屏滾動(dòng)插件使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
clipboard.js在移動(dòng)端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個(gè)小問題，通過(guò)查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
讓 IE6 及其以下版本支持 CSS 中 min/max-width/height 屬性2010-06-06
這篇文章主要介紹了如何采用call方式實(shí)現(xiàn)js繼承,需要的朋友可以參考下2014-05-05
這篇文章主要給大家介紹了關(guān)于Echarts重新渲染的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
一文帶你搞懂JS中導(dǎo)入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個(gè)單獨(dú)的單元，并且可以在其他代碼中進(jìn)行導(dǎo)入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別2023-03-03
使用FormData實(shí)現(xiàn)上傳多個(gè)文件
這篇文章主要為大家詳細(xì)介紹了使用FormData實(shí)現(xiàn)上傳多個(gè)文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12