表单验证的初步实现和省市级联
生活随笔
收集整理的這篇文章主要介紹了
表单验证的初步实现和省市级联
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.表單驗證的初步實現(xiàn)
<!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 language="JavaScript" type="text/javascript">window.οnlοad=function(){document.getElementById("myform").οnsubmit=function(){//獲取表單元素中的值var username=this.username.value;var psw=this.psw.value;var repsw=this.repsw.value;var tel=this.tel.value;var email=this.email.value;var mgz=['工資','待遇','薪水'];//敏感詞/*//獲取div元素var divuser=document.getElementById("divuser");var divpsw=document.getElementById("divpsw");divuser.innerHTML="";divpsw.innerHTML="";*///驗證用戶名中是否出現(xiàn)敏感字符if(username.length!=0){for(var i in mgz){ if(username.indexOf(mgz[i])!=-1){divuser.innerHTML="<font color='#CC0000'>用戶名不合法！</font>";//divuser.innerText="<font color='#CC0000'>用戶名不合法！</font>";return false;}}}else{divuser.innerHTML="<font color='#CC0000'>用戶名不能為空！</font>";return false;}//驗證密碼if(psw.length!=0){if(psw.length<6 || psw.length>10){divpsw.innerHTML="<font color='#CC0000'>密碼長度要求6-10位</font>";return false;}}else{divpsw.innerHTML="<font color='#CC0000'>密碼不能為空</font>";return false;}//驗證重復密碼if (repsw.length!=0) {if (psw!=repsw) {divrepsw.innerHTML="<font color='#CC0000'>兩次密碼不一致</font>";return false;}} else{divrepsw.innerHTML="<font color='#CC0000'>密碼不能為空</font>";return false;}//手機號驗證if (tel.length!=0) {if (!(/^1[34578]\d{9}$/.test(tel))) {divtel.innerHTML="<font color='#CC0000'>手機號不符合規(guī)范</font>";return false;}} else{divtel.innerHTML="<font color='#CC0000'>手機號不能為空！</font>";return false;}//郵箱驗證if (email!=0) {if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email))) {divemail.innerHTML="<font color='#CC0000'>郵箱不符合規(guī)范</font>";return false;}} else{divemail.innerHTML="<font color='#CC0000'>郵箱不能為空！</font>";return false;}}}</script></head><body><form id="myform">用戶名：<input type="text" id="username" name="username" οnblur=""/><span id="divuser"></span><br />密碼：<input type="password" id="psw" name="psw" /><div id="divpsw" style="display: inline;"></div><br />重復密碼：<input type="password" name="repsw" /><div id="divrepsw" style="display: inline;"></div><br />手機：<input type="text" name="tel" /><div id="divtel" style="display: inline;"></div><br />郵箱：<input type="text" name="email" /><div id="divemail" style="display: inline;"></div><br /><input type="submit" value="注冊" /></form></body> </html>?2.省市級聯(lián)（通過索引index）
?
<!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" language="JavaScript">function change() {var arr = new Array();arr['第一學期']=['Java', 'SqlServer基礎', 'C#', 'HTML'];arr['第二學期']=['JavaScript', 'SqlServer高級', '.NET', 'JSP'];arr['第二學年']=['Struts', 'ASP.NET', 'Ajax','Spring','Hibernate'];var pindex=document.myform.selTerm.value;var newOption;document.myform.selCourse.options.length=0;for (j in arr[pindex]) {newOption=new Option(arr[pindex][j],arr[pindex][j]);document.myform.selCourse.options.add(newOption);}}</script></head><body><form name="myform" id="myform" action="#myform" method="post" οnchange="change()"><TABLE border="0" align="center"><TR><TD colspan="2" align="center">考 試 申 請</TD></TR><TR><TD>學期</TD><TD><SELECT name="selTerm" onChange="change( )"><OPTION>--請選擇學期--</OPTION><OPTION value="第一學期">第一學期</OPTION><OPTION value="第二學期">第二學期</OPTION><OPTION value="第二學年">第二學年</OPTION></SELECT></TD></TR><TR><TD>課程</TD><TD><SELECT name="selCourse"><OPTION>--請選擇對應學期的課程--</OPTION></SELECT></TD></TR></TABLE></form></body></html>?
?3.省市級聯(lián)（通過value）
?
<!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" language="JavaScript">function change() {var arr = new Array();arr[0] = ['成都', '綿陽', '德陽', '自貢', '內江', '樂山', '南充', '雅安', '眉山', '甘孜', '涼山', '瀘州'];arr[1] = ['濟南', '青島', '淄博', '棗莊', '東營', '煙臺', '濰坊', '濟寧', '泰安', '威海', '日照'];arr[2] = ['武漢', '宜昌', '荊州', '襄樊', '黃石', '荊門', '黃岡', '十堰', '恩施', '潛江'];var pindex=document.myform.selProvince.selectedIndex-1;var newoption;document.myform.selCity.options.length=0;for (j in arr[pindex]) {newoption=new Option(arr[pindex][j],arr[pindex][j]);document.myform.selCity.options.add(newoption);} }</script></head><body><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )"><TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="images/1.gif" width="273" height="59"><IMG src="../example6/2.gif" width="1" height="75"><IMG src="images/2.gif" width="393" height="59"></TD></TR><TR><TD width="185" align="center">????姓名 </TD><TD width="287"><INPUT name="txtUserName" type="text" id="txtUserName" size="25"></TD></TR><TR><TD align="center">省份 </TD><TD><SELECT name="selProvince" id="selProvince" onChange="change( )"><OPTION>--請選擇開戶帳號的省份--</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="山東省">山東省</OPTION><OPTION value="湖北省">湖北省</OPTION></SELECT></TD></TR><TR><TD><DIV align="center">城市</DIV></TD><TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"><OPTION>--請選擇開戶帳號的城市--</OPTION></SELECT></TD></TR><TR><TD>?</TD><TD>?</TD></TR><TR><TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD></TR><TR><TD colspan="2">?</TD></TR></TABLE></body></html>?
轉載于:https://www.cnblogs.com/lixiaopan/p/6169718.html
總結
以上是生活随笔為你收集整理的表单验证的初步实现和省市级联的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： unity 编辑器扩展 扩展摄像机的属性
- 下一篇： InputFormat和OutPutFo