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标签中,然后再添加一个 ...
随机推荐
- 小甲鱼python视频第七讲（课后习题）
1.assert的作用. assert用来判断语句的真假,如果为假的话将触发AssertionError错误. 如果为真则继续执行. 2.变量互换(注意顺序) 3.成员资格运算符(in) 4.分数的划 ...
- 問題排查：建立選單時的錯誤 errcode:40016, errmsg:invalid button size hint: [RI68La0851vr18]
可能原因: 1.如提示所說,第一層選單個數超過限制 (最多3個) 2.選單的 json 格式有誤,目前已知少了括弧會提示此錯誤
- 第二章 第二个spring-boot程序(转载)
本编博客转发自:http://www.cnblogs.com/java-zhao/p/5336369.html 上一节的代码是spring-boot的入门程序,也是官方文档上的一个程序.这一节会引入s ...
- UVALive 5010 Go Deeper 2sat
二分答案,2sat判定. //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio& ...
- 验证码（网页的某些图片）在ie 360不显示，在火狐下显示正常
解决办法: 开始->运行,在运行输入框中输入“regsvr32 c:\windows\system32\pngfilt.dll”(不包含双引号),然后点击确定,如果在出现“已加载c:\windo ...
- ntp -q 输出说明
-bash-3.00# ntpq -p remote refid st t when poll reach delay offset ...
- 学习python之练习（二）
#2.已知a1=1,a2=2,an=a(n-1)+a(n-2)(n>=3),求数列{a1,a2,a3....an}的总和 import math arr = [0]*100 num = 0 fo ...
- android4.3 Bluetooth(le)分析之startLeScan分析
BluetoothAdapter.java中有low enery(le)的一些方法,android提供了这些方法,但源码中并未找到这些方法的调用之处.本文档主要分析这类方法的执行流程,来了解下le到底 ...
- centos 下 Qt Creator 的安装使用
centos 下 Qt Creator 的安装使用 Qt 以其开源,免费,完全面向对象(很容易扩展),允许真正的组件编程以及可移植跨平台等诸多优势得到越来越多的开发人员的青睐.Qt Creator 是 ...
- App技术框架
一.App技术框架的类型 图1 三种App技术框架之间的关系 目前App的技术框架基本分为三种(图1): (1)Native App:互动型,iOS.Android.WP各一套,而且要维护历史版本,要 ...