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 ...
随机推荐
- js、jQuery各种高度
height.js ```$(document).height(); //整个网页的高度 $(window).height(); //浏览器可视窗口的高度 $(window).scrollTop(); ...
- [Next] 三.next自定义服务器和路由
next 服务端渲染 实际上,next 一直都是执行的服务端渲染.npm start执行的是 next 自带的服务器来运行你的应用.next 是支持自定义服务器的,同时能够支持现有的路由和模式,你可以 ...
- qt treaview项checkbox样式
QTreeView::indicator:enabled:checked { /** 指示器 - 选中 **/ image: url(yzfx/checkbox_checked.png);}QTree ...
- debezium关于cdc的使用(下)
博文原址:debezium关于cdc的使用(下) 简介 debezium在debezium关于cdc的使用(上)中有做介绍.具体可以跳到上文查看.本篇主要讲述使用kafka connector方式来同 ...
- 多个类用@feignclient标注同一个服务,出错问题:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.Caused by: org.springframework.beans.factory.support.Bea..
如果标注了两个或以上类 @FeignClient 标注同一个 服务名称 调用方会主配置类启动会报错 测试类报错 java.lang.IllegalStateException: Failed to l ...
- Linux课程学习 第三课
生活中的许多事,并不是我们不能做到,而是我们不相信能够做到 https://www.linuxcool.com/ 一个很实用的Linux命令查询网站,并且还有发音 如果我们在系统终端中执行一个命令后想 ...
- CentOS7使用阿里云的yum源
替换成阿里云的yum源速度更快一些,替换很简单,简单记录一下步骤 1.备份原来的yum源 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repo ...
- QT Qdialog的对话框模式以及其关闭
模式对话框 描述 阻塞同一应用程序中其它可视窗口输入的对话框.模式对话框有自己的事件循环,用户必须完成这个对话框中的交互操作,并且关闭了它之后才能访问应用程序中的其它任何窗口.模式对话框仅阻止访问与对 ...
- glsl:error C1105: cannot call a non-function
今天写的shader编译过程中报了这个错误,而且错误行数是0.原因怎么找也找不到.后来发现原来是normalize方法写成了了normal正好和函数的形参名字一样. 特地记录一下.
- MXNetError: [05:53:50] src/operator/nn/./cudnn/cudnn_convolution-inl.h:287
insightface train.py 报错:mxnet.base.MXNetError: [05:53:50] src/operator/nn/./cudnn/cudnn_convolution- ...