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标签中,然后再添加一个 ...
随机推荐
- HDOJ 4508 湫湫系列故事——减肥记I （完全背包带优化）
完全背包的模版题.. 加了一个小优化 n^2的写法 O(V+N)在本题中复杂度较高 不采纳 完全背包问题有一个很简单有效的优化,是这样的:若两件物品i.j满足c[i]<=c[j]且w[i]&g ...
- 自已实现的async 只实现了一部分功能
不得不说,人和人的技术确实有差距,同样的功能,其他人就是有办写写的更优雅性能更好 不论是C还是js 自已有功能但看着也比人家的丑好多. //最终效果 同async //目前实现了个人最常用的 seri ...
- java容器简要概述
java中集合框架的概述 java集合类主要用于保存对象的. 常用的集合对象: Colletion接口,Collection接口是集合中的顶层容器,表示的是一组对象,它的下面有两个子接口List接口和 ...
- php插入排序
//php版插入排序 $arr=array('','5','3','7','6','4','8','2'); for($i=2;$i<count($arr);$i++) { ...
- Oracle DB 存储增强
• 设置Automatic Storage Management (ASM) 快速镜像 再同步 • 使用ASM 首选镜像读取 • 了解可伸缩性和性能增强 • 设置ASM 磁盘组属性 • 使用SYSA ...
- 树状DP （poj 2342）
题目:Anniversary party 题意:给出N各节点的快乐指数,以及父子关系,求最大快乐指数和(没人职员愿意跟直接上司一起玩): 思路:从底向上的树状DP: 第一种情况:第i个员工不参与,F[ ...
- 数独求解 DFS && DLX
题目:Sudoku 题意:求解数独.从样例和结果来看应该是简单难度的数独 思路:DFS 设置3个数组,row[i][j] 判断第i行是否放了j数字,col[i][j] 判断第i列是否放了j数字.squ ...
- Maven项目配置不接文件名
1.更改finalName为ROOT,在pom.xml中加入下边的build,是可以进行自动启动Tomcat. 2.删除webapps目录下的ROOT文件夹 3.进行maven项目的deploy 4. ...
- Apache 常用伪静态配置
1. /a/b?c=d => index.php?_a=a&_m=b&c=d 2. /xxx/detail-yyy.html => index.php?_a=xxx& ...
- SP_APPROVALSET_OVERTIME 插入單據
CREATE OR REPLACE PROCEDURE SP_APPROVALSET_OVERTIME(VAPPLY_NO varchar2,VAPPLYKIND_NO varchar2,VFAC_N ...