JS实现的简单表单验证功能完整实例

本文实例讲述了射流研究…实现的简单表单验证功能。分享给大家供大家参考，具体如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .jb51。网表单验证/titlestyle type='text/css '！- body，td，th { font-size : 12pxcolor: # 000000} body {底色： # CCCCCC；左边距左： 0px边距-top : 0px；} a { font-size : 12pxcolor: # 666600} a :链接{ text-decoration : none} a :已访问{ text-摆设：无；color: # 000099} a :悬停{文本装饰：下划线；color : # 6633 ff } a : active { text-decoration : none；color : # 00ff 00 }-/样式脚本类型=' text/JavaScript '函数检查username(){ var my form=document。getelementbyid(' form 1 ')；var username=我的表单。用户名。价值。长度；if(用户名1 | |用户名12){ errusername。innerhtml=' font color=' red '用户名不符合要求/font '；返回false} else { errusername。innerhtml=' font color=' green '用户名符合要求/font '；返回真；} }函数check age(){ var my form=document。getelementbyid(' form 1 ')；var age=我的形式。年龄。价值；如果（年龄！=ParSeint(age)){ errage。innerHTMl=' font color=' red '年龄不符合要求/font '；返回false} else { errage。innerhtml=' font color=' green '年龄符合要求/font '；返回真；} }函数检查email(){ var my form=document。getelementbyid(' form 1 ')；varmail=/^[a-za-z0-9_-][emailprotected][a-za-z0-9_-](\。[a-Za-Z0-9 _-])$/；if(！邮件。测试(我的表单。电子邮件。value)){ erre mail。innerhtml=' font color=' red '电子邮件不符合要求/font '；返回false} else { erre mail。innerHTMl=' font color=' green '电子邮件符合要求/font '；返回真；} }函数检查表单(){检查用户名()；检查年龄()；检查电子邮件()；if(检查用户名())检查年龄()(检查电子邮件()){ 0返回true } else { return false } }/script/head body alink=' center ' form id=' form 1 ' name=' form 1 ' method=' post ' action=' TTT。提交时的JSP='返回检查表单()'表格宽度=' 777 '边框=' 0 '单元格填充=' 1 '单元格间距=' 1 ' tr TD colspan=' 3 ' div align=' center '请输入你的注册信息/div/td /tr宽度='250' div对齐='右侧'请输入你的用户名：/div/TD TD宽度=' 250 ' div对齐='中心'输入类型=' text ' name=' username ' on bulr=' check username()'//div/TD tddiv id=' errusername ' align='中心'/div/TD/tr TD宽度=' 250 ' div对齐='右侧'请输入你的年龄：/div/TD TD宽度=' 250 ' div对齐='中心'标签输入类型=' text ' name=' age ' on bulr=' check age()'//label/div/TD tddiv align=' center ' id=' errage '/div/TD/tr TD width=' 250 ' div align=' right '请输入你的电子邮件：/div/TD TD宽度=' 250 ' div对齐='中心'标签输入类型=“文本” name=' email ' on bulr=' check email()'//label/div/TD tddiv align=' center ' id=' erre mail '/div/TD/tr tddiv align=' right '标签输入类型='提交'名称='提交'值='提交//label/div/TD tddiv align=' center '标签输入类型='重置'名称='提交2 '值='重置//label/div/TD TD div align=' center '/div/TD/tr/table/form/body/html运行效果：

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

Java脚本语言正则表达式在线测试工具：http://工具。JB 51。net/regex/JavaScript

正则表达式在线生成工具：http://工具。JB 51。net/regex/create _ reg

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript正则表达式技巧大全》 、 《JavaScript表单(form)操作技巧大全》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript错误与调试技巧总结》 及《JavaScript数学运算用法总结》

希望本文对JavaScript编程有所帮助。