jQuery_完成表单注册检验
在校验表单的时候会很麻烦，但是jq可以用很简单的方法来检验，即使用validate。
原表单：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
} #top{
border: 0px solid white;
width: 100%;
height: 50px;
}
#menu{
border: 0px solid white;
height: 40px;
background-color: black;
padding-top: 10px;
margin-bottom: 15px;
margin-top: 10px;
}
.top{
border: 0px solid white;
width: 405px;
height: 100%;
float: left;
padding-left: 25px;
}
#top1{
padding-top: 15px;
}
#bottom{
margin-top: 13px;
text-align: center;
} #form{
height: 500px;
padding-top: 70px;
background-image: url(img/regist_bg.jpg);
margin-bottom: 10px;
}
a{
text-decoration: none;
} label.error{
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
} label.success{
background:url(img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
} #father{
border: 0px solid white;
padding-left: 307px;
} #form2{
border: 5px solid gray;
width: 660px;
height: 450px;
} </style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!-- validate.js是建立在jQuery之上的，因此需要先导入jQuery的类库 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!-- 导入jQuery的类库 -->
<script type="text/javascript" src="js/messages_zh.js"></script>
<!-- 导入国家化处理类库 -->
<!-- 顺序必须先导入jQuery的类库再导入validate和国际化处理的类库 -->
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不为空",
minlength:"最小长度为3"
},
password:{
required:"密码不为空",
minlength:"最小长度为6",
digits:"密码必须为数字"
},
repassword:{
required:"确认密码不能为空",
equalTo:"与之前的密码不相等" },
email:{
required:"邮箱不为空",
email:"邮箱格式不正确"
},
username:{
required:"用户名不为空",
maxlength:"最大长度为5"
},
sex:{
required:"性别不为空"
}
},
errorElement:"label",<!--用来创建错误提示信息标签 validate插件默认的就是label-->
success:function(label){<!-- 验证成功后执行的回调方法-->
//label指向上面错误提示信息的标签label
label.text(" ")//将文本内容清空
.addClass("success");//添加自己定义的success类 } }); });
</script>
</head>
<body>
<div id="contanier">
<div id="form">
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="diaplay:none"></label>
</span> </td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
注意：
第一注意导入类库的顺序，
第二注意格式的问题，虽然写法简单，但是不要写错逗号
效果：
体会：学会了使用jq的validate来检验表单会简单很多，不需要再用正则表达式了，而且还有各种校验式，如下：
jQuery_完成表单注册检验的更多相关文章
- ajax+FormData+javascript 实现无刷新表单注册
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Android逆向破解表单注册程序
Android逆向破解表单注册程序 Android开发 ADT: android studio(as) 程序界面如下,注册码为6位随机数字,注册成功时弹出通知注册成功,注册失败时弹出通知注册失败. 布 ...
- form表单注册——HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 表单注册及自定义validate手机验证码验证实例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- PHP正则表达式及表单注册案例
正则表达式是一种具有特定模式的用来匹配文本的字符串 preg_match 匹配 $pattern = '/php/'; $subject = "php 是最好的编程语言,php 没有之一!& ...
- 再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含 ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- 使用express+mongoDB搭建多人博客 学习（3）connect-flash和mongodb，表单注册
1.根目录下新建settings.js,存放数据库配置 module.exports={ cookieSecret:"myblog", db:"blog", h ...
- angularjs表单注册--两次密码验证
html <div class="container" ng-controller="RegisterCtrl"> <form name=&q ...
随机推荐
- 客户A数据统计
-------------------------------------------------- --数据准备 /*将数据调入临时表,对advalues进行计算,并将月份更新到字段int1 */ ...
- C++学习 之 类的声明及成员的访问（笔记）
1.类的声明 简单来说,属性以及对属性的操作的整合叫做类.要声明类可使用关键字class,并在它的后面定义类名,然后紧接着是属于该类的代码块{}.类的声明类似于函数声明,类的声明本身并不改变程序 的行 ...
- 你写的 Java 代码是如何一步步输出结果的？ （转）
出处: 一步步解析java执行内幕 对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写J ...
- Tensorflow常见函数case argmax equal
常用的函数: tf.argmax(input, axis=None, name=None, dimension=None) input:输入Tensor axis:0表示按列,1表示按行 name:名 ...
- mysql索引失效的情况
1.WHERE字句的查询条件里有不等于号(如:WHERE column!=...),MYSQL将无法使用索引: 2.WHERE字句的查询条件里使用了函数的列(如:WHERE DAY(column)=. ...
- Erasing Substrings CodeForces - 938F (字符串dp)
大意: 给定字符串$s$, 长度为$n$, 取$k=\lfloor log2(n)\rfloor$, 第$i$次操作删除一个长度为$2^{i-1}$的子串, 求一种方案使得, $k$次操作后$s$的字 ...
- eclipse运行jsp出现404错误怎么办？
Window/Show View/Other/Server/Servers/双击“Tomcat v7.0 Server at localhost”在Server Locations配置中选择第二个选项 ...
- spring boot本地开发与docker容器化部署的差异
spring boot本地开发与docker容器化部署的差异: 1. 文件路径及文件名区别大小写: 本地开发环境为windows操作系统,是忽略大小写的,但容器中区分大小写 2. docker中的容器 ...
- 漏洞：阿里云盾phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导致GETSHELL
阿里云盾提示phpMyAdmin <=4.8.1会出现漏洞有被SHELL风险,具体漏洞提醒: 标题 phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导 ...
- linux下vim常用命令 （更新中...)
1.注释多行 1). 首先按esc进入命令行模式下,按下Ctrl + v,进入VISUAL BLOCK模式; 2). 在行首使用上下键选择需要注释的多行; 3). 按下键盘(大写)“I”键,进入插入模 ...