jQuery/javascript实现网页注册的表单验证
<html>
<head>
<meta charset="utf-8">
<title>注册表单验证</title>
<script src="jquery.js"></script>
<style type="text/css">
table{background-color:pink;width:80%;height:300px;}
td{text-align:center;}
</style>
<script language="javascript">
$("document").ready(function(){
$("#form1").submit(function(){
var user=$("#user").val();
var username=/^[a-z]{6,10}/i;
if(user.length==0){
$("#error1").html("账号不可以为空");
return false;
}else if(!username.test(user)){
$("#error1").html("请输入6-10的字母");
return false;
}else{
$("#error1").html("输入正确");
} var password=$("#pw").val();
var password1=/^[0-9]{6,10}/;
if(password.length==0){
$("#error2").html("密码不可以为空");
return false;
}else if(!password1.test(password)){
$("#error2").html("请输入6-10位的数字密码");
return false;
}else{
$("#error2").html("输入正确");
} var name=$("#name").val();
var name1=/^[a-z]{6,10}/i;
if(name.length==0){
$("#error3").html("姓名不可以为空");
return false;
}else if(!name1.test(name)){
$("#error3").html("请输入6-10位字母");
return false;
}else{
$("#error3").html("输入正确");
} var age=$("#ag").val();
var age1=/^[1-9]{1}[0-9]{0,1}$/;
if(age.length==0){
$("#error4").html("年龄不可以为空");
return false;
}else if(!age1.test(age)){
$("#error4").html("请输入合法年龄");
return false;
}else{
$("#error4").html("输入正确");
} var email=$("#em").val();
var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
if(email.length==0){
$("#error5").html("email不可以为空");
return false;
}else if(!email1.test(email)){
$("#error5").html("请输入合法电子邮件");
return false;
}else{
$("#error5").html("输入正确");
} var telephone=$("#tel").val();
var telephone1=/^[1]{1}[0-9]{10}/;
if(telephone.length==0){
$("#error6").html("电话不可以为空");
return false;
}else if(!telephone1.test(telephone)){
$("#error6").html("请输入合法电话");
return false;
}else{
$("#error6").html("输入正确");
} });
});
</script>
</head>
<body>
<center>
<form action="" method="post" id="form1" name="form1">
<h1>注册页面</h1>
<table border="1px">
<tr>
<td>
账 号：
<input type="text" name="admin" id="user"/>
<div id="error1" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
密 码：
<input type="password" name="password" id="pw"/>
<div id="error2" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
姓 名：
<input type="text" name="name1" id="name"/>
<div id="error3" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
年 龄：
<input type="text" name="age" id="ag"/>
<div id="error4" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
性别：
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>
电子邮件：<input type="text" name="email" id="em"/>
<div id="error5" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电话号码：<input type="text" name="telephone" id="tel"/>
<div id="error6" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="注册"/> </td> </tr>
</table>
</form>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式表单验证</title>
<style type="text/css">
table{background-color:yellow;border:2px blue solid;}
</style>
</head>
<body>
<center>
<form action="login.html" method="post" onsubmit="return isForm()">
<h1>注册页面</h1>
<table border="1px" width="350px" height="400px">
<tr>
<td>
账 号：
<input type="text" name="username" id="user"/>
<div id="error1" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
密 码：
<input type="password" name="password" id="pw"/>
<div id="error2" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
姓 名：
<input type="text" name="name1" id="name"/>
<div id="error3" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
性 别：
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>
年 龄：
<input type="text" name="age" id="ag"/>
<div id="error4" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电子邮件：<input type="text" name="email" id="em"/>
<div id="error5" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td>
电话号码：<input type="text" name="telephone" id="tel"/>
<div id="error6" style="display:inline;color:red;"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
<script language="javascript">
function isForm(){
var username=document.getElementById("user").value;
var password=document.getElementById("pw").value;
var name=document.getElementById("name").value;
var age=document.getElementById("ag").value;
var email=document.getElementById("em").value;
var telephone=document.getElementById("tel").value; var error1=document.getElementById("error1");
var error2=document.getElementById("error2");
var error3=document.getElementById("error3");
var error4=document.getElementById("error4");
var error5=document.getElementById("error5");
var error6=document.getElementById("error6"); var username1=/^[a-z]{6,10}/i;
var password1=/^[0-9]{6,10}/;
var name1=/^[a-z]{6,10}/i;
var age1=/^[1-9]{1}[0-9]{0,1}$/;
var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
var telephone1=/^[1]{1}[0-9]{10}/; if(!username1.test(username)){
alert("请输出6-10位字母");
return false;
}
error1.innerHTML="输入正确";
if(!password1.test(password)){
alert("请输入6-10的数字密码");
return false;
}
error2.innerHTML="输入正确";
if(!name1.test(name)){
alert("请输入6-10位字母");
return false;
}
error3.innerHTML="输入正确";
if(!age1.test(age)){
alert("请输入合法的年龄");
return false;
}
error4.innerHTML="输入正确";
if(!email1.test(email)){
alert("请输入合法电子邮件");
return false;
}
error5.innerHTML="输入正确";
if(!telephone1.test(telephone)){
alert("请输人电话联系方式");
return false;
}
error6.innerHTML="输入正确";
return true;
} </script>
</center>
</body>
</html>
jQuery/javascript实现网页注册的表单验证的更多相关文章
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- JQuery攻略（五）表单验证
表单验证,字段空白,输入合法,数据合法....... 此章节有 1.1字段验证 1.2正则表达式验证 1.3复选框的勾选 1.1字段验证 1.字段非空 $(document).ready(functi ...
- （七）JavaScript之[调试]与[前端表单验证]
12].调试为什么要去调试?1.在编写JavaScript时,如果没有调试工具将是一件很痛苦的事情.2.没有调试工具是很难去编写JavaScript程序的.3.编写的代码可能包含语法错误.逻辑错误,如 ...
- JavaScript入门学习笔记（表单验证）
表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...
- jQuery 表单验证插件——Validation(基础)
这个插件不错,是用jquery写的.能进行表单验证.我喜欢它的原因是因为 1.他有自带的验证规则 2.你可以自己写验证规则 3.可以通过ajax与后台交互,与后台数据比较.最后返回结果!我在表单中要验 ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- Django学习笔记之表单验证
表单概述 HTML中的表单 单纯从前端的html来说,表单是用来提交数据给服务器的,不管后台的服务器用的是Django还是PHP语言还是其他语言.只要把input标签放在form标签中,然后再添加一个 ...
随机推荐
- svc6 控制台程序利用SoapToolkit3.0调用WebService
1. 首先要安装SoapToolkit3.0安装包并安装(我的安装目录为:C:\Program Files\Common Files) 2. 新建vc控制台程序(空项目),项目名称:WinConsol ...
- three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、 自然光（天光效果）
/*** * HemisphereLight类 是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...
- 数据库管理员<三>
数据库管理员 介绍 每个 oracle 数据库应该至少有一个数据库管理员(dba),对于一个小的数据库,一个 dba 就够了,但是对于一个大的数据库 可能需要多个 dba 分担不同的管理职责.那么 ...
- apache的安装，启动和停止
一.apache服务器的安装 安装步骤直接傻瓜式进行安装.并没有太大的难点.apache的配置是学习的重点和难点. 安装好后再浏览器地址栏输入http://localhost.若能够成功安装,则会显示 ...
- SDWebImage实现原理--两张图带你看懂
SDWebImage底层实现有沙盒缓存机制,主要由三块组成:1.内存图片缓存,2.内存操作缓存,3.磁盘沙盒缓存 SDWebImage GitHub地址 版本4.0.0 一.SDWebImage时序图 ...
- AIX网络性能优化简介
在AIX 中,网络性能的优化可从以下几方面进行: 网络内存(network memory)的调整 socket 缓冲区 (socket buffer) 的调整 网络接口(network interfa ...
- meta http-equiv='refresh' 解读
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒), 把这句话加到指定网页的<head></head>里 一般也用在实时性很强的应用 ...
- 关于使用tracert命令检测网络问题
tracert命令是一个电脑网络工具-Windows命令行界面程序和内建命令,运行该命令后可以显示本机IP到达目标IP所经过的路由器IP地址,和响应的延迟信息! 在windows操作系统中,点击“开始 ...
- 为AM335x移植Linux内核主线代码(35)使用platform中的GPIO
http://www.eefocus.com/marianna/blog/15-02/310352_46e8f.html 使用GPIO,当然可以自己编写驱动,比如之前的第34节,也可以使用Kernel ...
- webview 实现滑动前进后退功能
实现该功能大家一定会想到在OnTouchListener里实现 webview.setOnTouchListener(new OnTouchListener() { @Override public ...