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 ...
随机推荐
- springBoot中tomcat默认端口修改
springboot在启动tomcat的默认端口是8080,在实际开发中,应客户要求必须使用80端口. 研究springboot后发现有两种方式可以实现修改tomcat的端口 第一.直接修改appli ...
- JWT了解和实际使用
一.JWT JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.虫虫今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下 ...
- Ruby初见
一. 简介 Ruby,一种简单快捷的面向对象(面向对象程序设计)脚本语言,在20世纪90年代由日本人松本行弘(Yukihiro Matsumoto)开发,遵守GPL协议和Ruby License. 二 ...
- Java集合框架中的元素
之前有一篇笔记,讲的是集合和泛型,这几天看Java集合中几个接口的文档,思绪非常混乱,直到看到Oracle的“The Collections Framwork”的页面,条理才清晰些,现在进行整理. 一 ...
- 关于Android studio调用高德地图的简单流程和要点
一,账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 前2步都比较简单,这里说下第三步. 获取Key 1.进入控制台,创建一个 ...
- JavaScript制作九九乘法表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CentOS7部署kettle
去官网下载kettle, 或者百度网盘下载(nnnk),解压到目录/opt/service/, 解压后的目录是data-integration kettle需要java环境才能运行,因此要安装Java ...
- 安卓端调用h5界面js方法和ios端调用h5界面js方法
备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法: 2.安卓端调用h5界面js方法: @Override protect ...
- Hybrid APP架构设计
通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...
- 华为ensp问题：云映射本地网卡，直连路由器可以ping通，pc却不行？
拓扑图:cloud 云映射本机物理网卡:192.168.56.1 R1可以Ping通,所有Pc都不行,路由表也存在路由信息,不知道什么问题?