JavaScript中Form表单技术汇总(推荐)_javascript技巧_第1页
JavaScript中Form表单技术汇总(推荐)_javascript技巧_第2页
JavaScript中Form表单技术汇总(推荐)_javascript技巧_第3页
JavaScript中Form表单技术汇总(推荐)_javascript技巧_第4页
JavaScript中Form表单技术汇总(推荐)_javascript技巧_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、javascript中form表单技术汇总（推 荐）这里不进行很复杂的后台验证以及javascript的正则表达式，只是简单的介绍 下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术, 我后面还会继续写博客的。本人也还在学习中。表单验证1-简单验证进行简单的验证，用户名必须为abed,密码长度必须大于等于6然后根据用户输入的数据，在后面给出提示。代码演示：<html><head><title>dhtml技术演示-一表单验证</title><mctai http-cquiv二content-type" conte

2、nt二text/html; charset二utf-87> <script>function checkusername（）/alert （，zaa，z）;测试这个失去焦点监听是否管用var ousernamenode 二 document. getel ementsbyname （/，username/，） 0;var name = ousernamenode. value;/这个 type二"text"的 value 的值是方框内 的字符以后有后台时，“abed”这个数据应该通过ajax技术向后台要/这里我们只是做简单的演示-就是填写的name必须是a

3、bedif （neime二二abed"） document. gctelcmcntbyld（"uscrnmncspein”）. inncriltml=z，用户名止确".fontcolor（，zgreen）；elsedocument. getelementbyld（，zusernamespanz，）. innerhtml二用户名错误" fontcolor （，red，/）;function checkpwd （）var ouserpwdnode 二 document. getelementbyld（pwd）0;var pwd二ouserpwdnode. v

4、alue;if （pwd. length>=6） document. getelementbyld （z，userpwdspanz，）. innerhtml=z，密码格式符合要求 fontcolor（green）；elsedocument. getelementbyld (z，userpwdspan，z). innerhtml=，z密码长度必须大于等 于 6". fontcolor ("red");</script></hcad><body><form><! onblur在对象失去输入焦点吋触发。->

5、;用户名：input type二text" name二username" onblur=/zcheckusername()，z /> <span id二uscrneinicspein>/span><br/><br/><!-为了演示清楚，密码这里也用type二text了，其实应该用type二password" 的->密码：input type二text" nanic二pwd onblur=/zchcckpwd ()，z /><span id二userpwdspartx/span>

6、</form></body></html> 360浏览器& 1演示结果:(2> 口辱屏浏览口 dhtml技术®示表s验证x 0c!用户名： 密码:用户名不符合规则:o卫跨貌逻d dhtm處术3示表軽证x 3 csdh 用户名:abeda用户名错误密码:123456密码格式符合要求密码不符合规则:o i 跨屏極 d dhtml技术3示表軽证 x |3 csdn>markdow 用户名:abed用户名正确密码：12345密码长度必须大于等于6注册表单的验证2-正则表达式代码演示：<html><head><

7、;title>dhtml技术演示-注册表单的验证一js中使用正则表达式</title> <meta http-equiv二content-type" content二text/html; charset二utf-8"> <script typc="text/javascript">function checkusername ()var ousernamenode = document. getelementsbyname(username)0;var username 二 ousernamenode. valu

8、e;用正则检验var reg = new regexp(a-z，i)；/包含4个连续的字母就可以，注意 的双引号不能省略/i表示忽略大小写/var regg 二new regexp(八a-z 4$, i) ;/只含 4 个连续的字母，注意"i" 中的双引号不能省略/厂代表开始$代表结束var ollsernamespan 二 document. getelementbyld ("usernamespan)； /alert(reg. test(username);if (reg. test(username) ousernamespan. innerhtml 二&q

9、uot;用户名格式正确.fontcolor ("green");else ousernamespan. innerhtml = 用户名格式错误/z. fontcolor (，zredz，);</script></head><body><!-演示js中正则表达式的用法一><script type二text/javescript"> /var reg =厂0-96$/ ; /法一 var reg = new regexp(八0-9 6$)；/法二var str = "123456"var

10、bres = reg. test (str);/111使用正则表达式对象屮的方法进行验证-一只能用于判断是否匹配，功能 类似于java中的string类中的matches ()方法/alert(bres);/truc/222使用string对象中的方法进行止则检验-一功能更强大，类似于java当 屮的matcher工具var res = str. match (reg) ;/匹配的结果保存在res (是一个数组)中,如果没 有匹配到则res为nullo/alert(res);/123456/match方法返回的数组有三个屈性：inputx index和lastlndcxo/一点细节 使用new

11、 regexp ()方式时，特殊字符要传义/var reg2 二厂d6$/; /不需要转义var reg2= new regexp(，z飞d6$)；/探注意要转义/上面那句是错误的，必须要写成：new regexprad6$，z)/alert( reg2test("123456");</script><form><! onblur在对象失去输入焦点吋触发。->用户名：input type二text" name二username" onblur=/zcheckusername()，z /><span id二u

12、scrneinicspein>/span></form></body></html> 360浏览器8. 1演示结果：只需要包含连续4个字母就可以了。i i e> 口跨屏浏览用户名:a bed dhtml技桶示注册表单m x s csdn-m用户名格式错误o i 口跨屏浏览| d dhtml技术s示潮表单的x | bcsdn用户名:abc213asdf用户名格式正确注册表单的验证且控制提交-前端校验: 代码文件创建位置:7 庐 myuhtmlhroj7 妙 sh：7 田 tn.hncu.user> regservlet.java*>

13、; 埶 jre system library jdk1.7.0_04> b, java ee 5 librariesv 0 webroot7 凸 dhtml> d 1newsfont> 0 2menus> 0 3table> 0 4checkboxs<1scrap> d 5radio-select2form2.html3form3.htmlv 0 6formsubmit> & meta-inf> & web-inf jf index.jsp> tiz7 mygame代码演示:3form3 html<html>

14、;<head><title>dhtml技术演示-一注册表单的验证且控制提交一前端校验</title> <mcta http-cquiv二contcnt-typc contcnt二tcxt/html; charsct二utf- <script type二text/javascript>function checkusername（）var ousernamenode 二 document. getelementsbyname（username）0;var username = ousernamenode. value;用正则检验var reg

15、 = new regexp（a-z 4，i"） ;/包含4个连续的字母就可以,注意 i 的双引号不能省略/i表示忽略大小行/var regg =new regexpcaz 4$", i) ;/只含 4 个连续的字母，注意 中的双引号不能省略/厂代表开始$代表结束var ousernamespan 二 document. getel ementbytd (，usernamespan/，);if (reg test(uscrnamc) ousernamespan. inncriitml=，z用户名格式止确".fontcolor (，grccn，); return tr

16、ue;else ousernamespan. innerhtml二用户名格式错误.fontcolor (，/red，/); return false;function checkpwd()var ouserpwdnode 二 document. getelementsbymame(pwd)0;var pwd 二 ouserpwdnode. value;var rcg2 = new regexpc*wd 6,9$)；if (reg2. test(pwd) document. getelementbyld (，zuserpwdspanz，). innerhtml二密码格式符合要求 .fontcol

17、or cgreen)；return true;elsedocument. getelementbyld (z，userpwdspan，z). innerhtml=，z密码长度必须是 6-9 位的数字字母或下划线".fontcolor (，zred，z);return false;function checkuser()if (checkusername() && checkpwd() ) /如果还有其他项需要在提交前验证， 直接把那个验证函数写这里就行return true;elsereturn false;</script></hcad>&l

18、t;body><!-通过注册onsubmit事件响应来控制表单的提交，如果return false则不会 提交，而return true则会提交。如果不注册onsubmit事件即是return true onsubmit当表单将要被提交时触发。<form acti on 二"/mydhtnilproj/scrvlct/regscrvlct，z on submit 二"retur n true;，z>><form action二"/mydhtmlproj/servlet/regservlet，z onsubmit二"re

19、turn checkuser ();>用户名：input type二text" name=/zusernamez，onblur=/zcheckusernanie ()/z /> <span id二userneimespan>/span>!-为了演示清楚，密码这里也用typc二"text了，其实应该用typc二password" 的->密码：<input type二"text" name二"pwct onblur=，/checkpwd ()z，/><span id=/zuserpwd

20、span，z></span><br/><input type二submivalue二注册"/></form><hr/>!一表单提交方式2-自己写个按钮来代替form自带的提交按钮一><form id二userinfo" action二/dhtmlproj/servlet/regservlet >用户名：input type二text" name二username" onblur=/zcheckusername2 ()，z/> <span id二uscrnein

21、icspein2>/span><br/>密码:input type二"text" name二pwct onblur二"checkpwd2 () "/><span id=/zuserpwdspan2/z></span><br/></form><input type二button" value二注册"onclick二mysubniit () " /><script type二"text/javascript'func

22、tion mysubmit()var oformnode 二 document. getelementbyld("userinfo)；i f (checkusername2 () &&checkpwd2 () oformnode. submit () ;/submit 提交表单。function checkuserame2()var ousernamenode 二 document. getel ementsbyname (，usernamez，) 1;var uscrnamc = ouscrnamcnodc. valuc;用正则检验var reg = new reg

23、exp c az 4, i) ;/包含4个连续的字母就可以,注意 i 的双引号不能省略/i表示忽略大小写/var regg =new regexp (厂a-z 4$", "i") ;/只含 4 个连续的字母，注意 屮的双引号不能省略/厂代表开始$代表结束var ousernamespan 二 document. getelementbyld("usermamespan2)；if (reg. test(username) ouscrnamespan. inncriitml=，z用户名格式止确".fontcolor (，grccn，);return

24、 true;else ousernamespan. innerhtml二用户名格式错误.fontcolor (，/red，/);return false;function checkpwd2()var ouscrpwdnodc = document. gctelcmcntsbymanic (pwd)1;var pwd = ouscrpwdnodc. valuc;var reg2 = new regexp(" wd 6,9$");if (reg2. test(pwd) document. getelementbyld(/zuserpwdspan2/z). innerhtml二

25、密码格式符合要求 ".fontcolor("green");rcturn true;else document. getelementbyld (，/userpwdspan2，/). innerhtml二密码氏度必须是 6-9 位的数字字母或下划线.fontcolor (，/red，/);return false;</script></body></html>show. jsp:<% page language= java，z import 二 java .util.*" pageencoding=/zutf-8

26、z，%> <%taglib uri=http:/java. sun. com/jsp/jstl/core prefix二c><! doctype html public -/w3c/dtd html 4.01 transitional/enz，> <html><head><title>这是注册后的显示页面</title></head><body><%out. println(request getattribute (z，uname，z); out. printin (request.

27、getattribute (，zpwd，z);%><%for(int i=0;i<3;i+)/这个下而可以写html代码%><div> 欢迎 </div><%这个上面可以写html代码%></body> </html>regservlet. java 这个是new 一个 servleto 会111动给我们配好web. xml7 & web-inf& lib囲 web.xmlpackage cn.hncu. user;import java. io. ioexception;import java

28、. io. printwriter;import javax. servlet. servletexception;import javax. servlet, http. littpscrvlct;import javax. servlet, http. httpservletrequest;import javax.servlet, http. httpservletresponse; public class regservlet extends httpservlet public void doget(httpservletrequest request, httpservletre

29、sponse rcsponsc)throws servletexception, loexception dopost (request, response);public void dopost (httpservletrequest request, httpservletresponse rcsponsc)throws servletexception, loexception request. setcharacterencoding(utf-s) ;/设置编码st ring n ame 二 request. getparameter (username)；/username 为提交过

30、来的 表单中的一个input的name属性string pwd 二 request. gctparametcr(pwd)；/system, out. printin(name);request. setattribute (z/uname/z, hncu”+naine);request. setattribute (/zpwdz/, pwd+pwd);request. £etrequestdi spatcher (z/dhtml/6formsubmi t/jsps/show. jsp). forw ard(request, response);/输出，导向另外的页而显示web. xm

31、l<?xml version二1.0 encoding二utf-8？> <web-app version二2. 5xmlns二http:/java. sun. com/xml/ns/javaee xmlns:xsi二http:/www. w3. org/2001/xmlschcma-instancez， xsi: schemalocation=，/http: /java. sun. com/xml/ns/javaee http:/java. sun. com/xml/ns/javaee/webapp_2_5. xsd> <di splay - n ame>&

32、lt;/di splay-r)ame><servlet><dcscription>this is the description of my j2ee componcnt/dcscription> <displa)-name>this is the display name of my j2ee component</display-name<servlet-rmme>regservletx/servletname> <servlet-class>cn. hncu. user. regservlet</s

33、ervlet-class> </servlet><servlet-mapping> <servlet-name>regservlet</servlet-name> <url-pattern>/servlet/regservlet</url-pattern></servlet-mapping><welcomc-filelist><welcome-file>index. jsp</welcome-file></welcome-filelist></weba

34、pp>360浏览器& 1演示图片：c 合 0 http:/localhost:8080/mydhtmlproj/dhtml/6formsubmit/3form3.htnr 手机惭§夹f网归:全 屬百度 田破解3 acm大3 hdoj的cgithub realtim index i o 口跨屏浏览i囲dhtml技桶示潮靜&c：x +用户名:asdasd用户名格式正确 密码：21324324密码格式符合雯注册正确的格式，可以通过点击注册按钮跳转页面当格式都填写正确时，点注册按钮，自动跳转到另外的页面。曲 手机收藏夹 网址大全屬百度吾爱破解 bacm大 bhdoj的

35、0github realtim index口呈异滋充囲逹是注册后的显示页面x +asdasd pwd21324324有一个格式错误时，点注册按钮不会有反应的。c 合 0 http:/localhost:8080/mydhtmlproj/dhtml/6formsubmit/3form3.htmlacm大 bhdoj的 qgithub ©realtim lnde:收藏 手机收藏夹壬网址大全國百度田吾爱破解qi o 口逹弄刘竟囲dhtml技术演示注册表单ai x用户名:密码:注册用户名:asdf 密码：asfd用户名格式正确密码长度必须是6-9位的数字字母或下划线)ttp:/localho

36、st:8080/mydhtmlprqj/dhtml/6formsubmit/3for牧藏 手机收藏夹*网址大全 屬百度 田吾爱瞬 ® acm大hhdoj的qgithub ©realtim lnde:o i 胯屏測览画dhtmu$术演示注册表雜 x + |用户名：密码：空册用户名：asdf 用户名格式正确密码:asfd码格式符合要求注册注册表单的验证且控制提交-前端校验-最终版木：代码演示：<html><head>title>dhtml技术演示一-注册表单的验证且控制提交一前端校验一最终版本</title><meta http-

37、equiv二content-type content二text/html; charset二utf-8/> <script typc=，tcxt/javascriptz，>function check (name, reg, spanld, oklnfo, errlnfo) var value 二 document. getelementsbyname(name)0. value;用正则检验var ospannode = document.getelementbytd(spantd);if (reg. test(value) ospannode. innerhtml=okin

38、fo, fontcolor (z，green，z);return true;else ospannode. in nerhtml 二 errtnfo. font color (z，redz/);return false;function checkusername()var reg 二 new regexp(z，a-z 4, i)；/包含 4 个连续的字母，注意i中的 双引号不能省略return check("username", reg,，usernamespanz，,，z用户名格式正确"，"用户名格 式错误)；function checkpwd()v

39、ar reg = new regexp("八wd 6,9$);return check ("pwd", reg, "uscrpwdspem","密码格式符合要求"，"密码长度必须 是6-9位的数字字母或下划线);function checkpwd2()var flag;var pwd = document. getelcmcntsbynanic(pwd) 0.valuc;var pwd2 = document. getelementsbyname(，zpwd2，z) 0.value; var ospannode =

40、 document. getelementbyld (，zuserpwd2span，z); if (pwd二二pwd2)ospannode. innerhtml二两次密码一致.fontcolor ("green");flag = true;else ospannode. innerhtml=/，两次密码不一致".fontcolor ("red"); flag 二 false;rcturn flag;function checkmail() var reg = 厂w+w+(. w+)+$/i;return check(ma订,reg, "usermailspan，“邮箱格式正确，邮箱格式不正确 )；function checkuser () /控制表单的提交if (checkusername() && checkpwd() && checkpwd2 () && checkmail () ) return true;elsereturn f

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论