简单的表单验证

<head>
 <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
 <title>表单验证</title>
 <script language=”javascript” src=”include/form.js”>
 </script>
 </head>
 <body><form action=”#” method=”post” name=”form” id=”form”>
 姓&nbsp;&nbsp;&nbsp;&nbsp;名:<input name=”username” type=”text” id=”username” />字母、数字、下划线<br />
 密&nbsp;&nbsp;&nbsp;&nbsp;码:<input name=”password” type=”password” id=”password” /><br />
 密码确认:<input name=”password2″ type=”password” id=”password2″ /><br />
 生&nbsp;&nbsp;&nbsp;&nbsp;日:<input name=”birthday” type=”text” id=”birthday” />20100712<br />
 E-mail&nbsp;&nbsp;:<input name=”email” type=”text” id=”email” /><br />
 <input type=”reset” value=”重写” />&nbsp;&nbsp;&nbsp;&nbsp;
 <input type =”submit” value =”提交” onclick =”return CheckForm();”>
 </form>
 </body>
其中需要javas代码存储的form.js页面,代码如下:
<!–
 function CheckForm()
 {
 if (document.form.username.value.length == 0)//*********************************姓名验证
 {
 alert(“请输入姓名!”);
 document.form.username.focus();
 return false;
 }
 else if(!Testusername(document.form.username.value))
 {
 //document.write(document.form.username.value);
 alert(“姓名格式错误!”);
 return false;
 }
 else if(document.form.password.value.length == 0)//****************************密码验证
 {
 alert(“密码不能为空”);
 document.form.username.focus();
 return false;
 }
 else if(!Testpassword(document.form.password.value,document.form.password2.value))
 {
 //document.write(document.form.password.value);
 alert(“两次密码不相同”);
 document.form.password2.focus();
 return false;
 }
 else if(!Testday(document.form.birthday.value))//**********************生日验证
 {
 //document.write(document.form.birthday.value);
 alert(“生日格式错误”);
 document.form.birthday.focus();
 return false;
 }
 else if(!Testemail(document.form.email.value))//****************邮箱验证
 {
alert(“邮箱格式错误”);
 document.form.birthday.focus();
 return false;
 }
 return true;
 }
function Testusername(struesrname)//*************************字母数字下划线
 {
 var pattern = /[a-zA-Z0-9_]/;
 if(pattern.test(struesrname))
 return true;
 else
 return false;
 }
function Testpassword(str_ps1,str_ps2)//********************两次密码相同
 {
 if(str_ps1==str_ps2)
 return true;
 else
 return false;
 }
function Testday(str)//*************************************格式为20100712
 {
 var pattern= /[0-9]{8}/;
 if(pattern.test(str))
 return true;
 else
 return false;
 }
function Testemail(str_email)//************************格式是:以字母数字下划线开头然后是任意字符和@下面是字母数字和.和2到3位字母数字结束
 {
 var pattern=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9])+\.)+([a-zA-Z0-9]{2,4})+$/;
 if(pattern.test(str_email))
 return true;
 else
 return false;
 }
 –>

注:也可以使用跳转页面使用PHP验证(简单举例)

$flag=true;
 if(!ereg(“[a-zA-Z0-9_]”,$_POST[“username”]))
 {
 echo “姓名格式不正确<br />”;
 $flag=false;
 }
 if(!ereg(“[0-9]{8}”,$_POST[“birthday”]))
 {
 echo “生日日期不正确<br />”;
 $flag=false;
 }
 if($flag)
 {
 echo $_POST[“username”];
 echo $_POST[“birthday”];
 }

本例只是一个简单的javascript验证表单,希望对你有所帮助

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴裕超

atom编辑器启动后文件不能编辑的解决办法

今天更新了atom,并且安装了很多插件,突然发现所有页面不能编辑了,如图 ? 这个光标块会自动跳到单词后面,后来发现按一下键盘的字母a就变成正常光标了,至于原因...

2777
来自专栏程序员互动联盟

【专业技术】android 应用程序如何获取root权限

问题: 我遇到的问题是,在setting中我要操作/dev/mem设备,在一个寄存器中写值。对/dev/mem的操作毫无疑问是需要root权限的。开始我的做法是...

45410
来自专栏CaiRui

Flask 程序的基本结构

1、初始化   所有Flask程序都必须创建一个程序实例。web服务器使用一种名为Web服务器网关借口的协议,把接收自客户端的所有请求都转交给这个对象处理。 f...

2038
来自专栏应兆康的专栏

每天一个Linux命令(4)——mkdir

mkdir命令用来创建目录。该命令创建由dirname命名的目录。如果在目录名的前面没有加任何路径名,则在当前目录下创建dirname指定的目录,如果给出了一个...

2968
来自专栏逸鹏说道

【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】

说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/...

2653
来自专栏Java编程技术

java中守护线程与用户线程

Java线程分为两类分别为daemon线程(守护线程)和User线程(用户线程),在JVM启动时候会调用main函数,main函数所在的线程是一个用户线程,这个...

881
来自专栏黑泽君的专栏

用gcc编译c语言程序以及其编译过程

对于初学c语言编程的我们来说,学会如何使用gcc编译器工具,对理解c语言的执行过程,加深对c语言的理解很重要!!!

1621
来自专栏前端小叙

vue报错集锦

1、vue报错: 没安装 less-loader css-loader style-loader        可能的很大原因:没安装less 2、vuex报错...

4546
来自专栏纯洁的微笑

架构师带你玩转分布式锁

大多数互联网系统都是分布式部署的,分布式部署确实能带来性能和效率上的提升,但为此,我们就需要多解决一个分布式环境下,数据一致性的问题。

902
来自专栏积累沉淀

Linux软连接和硬链接

1.Linux链接概念 一种在共享文件和访问它的用户的若干目录项之间建立联系的一种方法 Linux链接分两种,一种被称为硬链接(Hard Link),另一种...

3038

扫码关注云+社区

领取腾讯云代金券