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标签中,然后再添加一个 ...
随机推荐
- [转载]Altium规则详解及设置
在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...
- [aspx]控件及代码小例
1. 原生 asp 方式遍历 DataTable 2. aspx 的控件 Repeater 后台绑定 <%-- DataTable dt = OleDbHelper.GetTable(&quo ...
- hdu 3254 (状压DP) Corn Fields
poj 3254 n乘m的矩阵,1表示这块区域可以放牛,0,表示不能,而且不能在相邻的(包括上下相邻)两个区域放牛,问有多少种放牛的方法,全部不放也是一种方法. 对于每块可以放牛的区域,有放或者不放两 ...
- python 异常含义
异常 描述 NameError 尝试访问一个没有申明的变量 ZeroDivisionError 除数为0 SyntaxError 语法错误 IndexError 索引超出序列范围 KeyError 请 ...
- wxPython--Python GUI编程参考链接
原文链接http://www.cnblogs.com/coderzh/archive/2008/11/23/1339310.html
- 关于.NET(c#)引用Dll后，找不到命名空间的问题
最近做了一个Silverlight项目,一个类库引用DLL后,找不到命名空间.于是各种google,方法如下: 1.类库与DLL的目标框架不一致: 2.删除obj下文件和清空bin下文件: 3.重装系 ...
- 【JAVA】通过HttpClient发送HTTP请求的方法
HttpClient介绍 HttpClient 不是一个浏览器.它是一个客户端的 HTTP 通信实现库.HttpClient的目标是发 送和接收HTTP 报文.HttpClient不会去缓存内容,执行 ...
- android压力测试命令monkey详解
一.Monkey 是什么?Monkey 就是SDK中附带的一个工具. 二.Monkey 测试的目的?:该工具用于进行压力测试. 然后开发人员结合monkey 打印的日志 和系统打印的日志,结局测试中出 ...
- ajax返回类型dataType json和text比较
$.ajax({ type: "post", url: "${ctx}/modules/fos/reference/echart", //dataType:'j ...
- 利用NVelocity 模版生成文本文件
namespace Common { public class Tools { public string Process(string content, int startIndex, int le ...