基于jQuery会员中心安全修改表单代码。这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="Safety">
<dl>
<dt>
<strong>登录密码:</strong>
<span>保障账户安全,建议您定期更换密码</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置</b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">当前密码:</td>
<td><input type="text" class="safinput1" /> <span style="display:none;">直接在input后加span没问题</span></td>
</tr>
<tr>
<td width="35%" align="right">设置新密码:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">确认新密码:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><input type="submint" class="safSub" value="修改登录密码" /></td>
</tr>
</table>
</form>
</dd> <dt>
<strong>交易密码:</strong>
<span>保障资金安全,建议您交易密码区别于登录密码</span>
<b><span class="glyphicon glyphicon-exclamation-sign"> </span>未设置 </b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">设置交易密码:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">确认交易密码:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><input type="submint" class="safSub" value="修改登录密码" /></td>
</tr>
</table>
</form>
</dd> <dt>
<strong>手机号码:</strong>
<span>保障账户与资金安全,是您在融合天下重要的身份凭证</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置 </b>
<em>修改</em>
</dt>
<dd>
<ul class="Step">
<li class="stepCur"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<div class="clearfix"></div>
</ul><!--Step/-->
<form action="#" method="get" class="sjyz-one">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">手机号:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">验证码:</td>
<td><input type="text" class="safinput2" /> <button>点击获取</button></td>
</tr>
<tr>
<td width="35%" align="right">身份证号:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><a class="safSub sjyz-one-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<form action="#" method="get" class="sjyz-two">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">新手机号:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">验证码:</td>
<td><input type="text" class="safinput2" /> <button>点击获取</button></td>
</tr>
<tr>
<td width="35%" align="right">身份证号:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><a class="safSub sjyz-two-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<div class="sjyz-ok"><span class="glyphicon glyphicon-ok"></span> 恭喜您,设置成功!</div>
</dd> <dt>
<strong>实名认证:</strong>
<span>保障账户安全,只有通过实名认证,才能充值投资、申请贷款</span>
<b><span class="glyphicon glyphicon-ok"> </span>已经设置 </b>
<em>修改</em>
</dt>
<dd>
<form action="#" method="get" enctype="multipart/form-data">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">用户名:</td>
<td>asdsdfasdf</td>
</tr>
<tr>
<td width="35%" align="right">真是姓名:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">身份证号:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">正面证件照</td>
<td><input type="file" name="_f" /> </td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td>
<img src="http://gb.cri.cn/mmsource/images/2004/08/26/nc040826017.jpg" width="280" height="188" />
</td>
</tr>
<tr>
<td width="35%" align="right">背面证件照</td>
<td><input type="file" name="_f" /> </td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td>
<img src="http://www.southcn.com/tech/gdkj/200403290037_609722.jpg" width="280" height="188" />
</td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><input type="submint" class="safSub" value="提交" /></td>
</tr>
</table>
</form>
</dd> <dt>
<strong>电子邮箱:</strong>
<span>邮件接收账户通知,及时了解账户信息变动情况</span>
<b><span class="glyphicon glyphicon-exclamation-sign"> </span>未设置 </b>
<em>认证</em>
</dt>
<dd>
<ul class="Step">
<li class="stepCur"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<div class="clearfix"></div>
</ul><!--Step/-->
<form action="#" method="get" class="sjyz-one">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">邮箱验证:</td>
<td><input type="text" class="safinput1" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><a class="safSub sjyz-one-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<form action="#" method="get" class="sjyz-two">
<table width="100%" class="safForm">
<tr>
<td width="35%" align="right">邮箱验证码:</td>
<td><input type="text" class="safinput2" /></td>
</tr>
<tr>
<td width="35%" align="right">&nbsp;</td>
<td><a class="safSub sjyz-two-next" href="javascript:;">下一步</a></td>
</tr>
</table>
</form>
<div class="sjyz-ok"><span class="glyphicon glyphicon-ok"></span> 恭喜您,设置成功!</div>
</dd> </dl>
</div><!--Safety/-->

via:http://www.w2bc.com/Article/44043

基于jQuery会员中心安全修改表单代码的更多相关文章

  1. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  2. 【表单验证】基于jQuery的高度灵活的表单验证(无UI)

    表单验证是前端开发过程中常见的一个需求,产品需求.业务逻辑的不同,表单验证的方式方法也有所区别.而最重要的是我们要清楚,表单验证的核心原则是--错误信息提示准确,并且尽可能少的打扰/干扰用户的输入和体 ...

  3. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  4. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  5. 使用jQuery,实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  6. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  7. jQuery Label Better – 友好的表单输入框提示插件

    jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...

  8. jquery来跨域提交表单

    说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...

  9. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

随机推荐

  1. 微信支付HTTPS服务器证书验证指引

    1. 背景介绍 2. 常见问题 3. 验证证书 4. 安装证书 背景介绍 微信支付使用HTTPS来保证通信安全, 在HTTPS服务器上部署了由权威机构签发的证书, 用于证明微信支付平台的真实身份. 商 ...

  2. Python学习笔记001——Linux

    Linux文件系统采用树形目录结构,系统中一切皆文件.文件名字母区分大小写 Linux命令使用格式(终端窗口) 命令名 [选项] [参数] 命令名:在命令行输入命令. 备注:命令名字母区分大小写, 1 ...

  3. SmartUpload类实现上传和下载

    实现文件的上传与下载,可以使用Java的I/O流的类来实现,也可以使用专业的上传.下载组件.这些组件提供了现成的类,程序员只需调用这些类中的方法即可实现文件的上传与下载.本章将向读者介绍如何应用jsp ...

  4. Innodb中自增长值的列

    Innodb中,自增长值的列必须是索引,同时必须是索引的第一个列.如果不是第一个列,数据库会报出异常 mysql> create table t_inc01( -> a int auto_ ...

  5. State Threads 回调终结者

    上回写了篇<一个“蝇量级”C语言协程库>,推荐了一下Protothreads,通过coroutine模拟了用户级别的multi-threading模型,虽然本身足够“轻”,杜绝了系统开销, ...

  6. 谁说C语言很简单?

    前两天,Neo写了一篇<语言的歧义>其使用C语言讨论了一些语言的歧义.大家应该也顺便了解了一下C语言中的很多不可思异的东西,可能也是你从未注意到的东西. 是的,C语言并不简单,让我们来看看 ...

  7. SharePoint 2013 Troubleshooting——启用 Developer Dashboard

    SharePoint 2010的管理员和开发者可能对SharePoint Developer Dashboard(开发人员仪表盘)很熟悉.在SharePoint 2013这个工具已经被大范围的改写了, ...

  8. python字符串格式化之学习笔记

    在python中格式化输出字符串使用的是%运算符,通用的形式为 •格式标记字符串 % 要输出的值组其中,左边部分的”格式标记字符串“可以完全和c中的一致.右边的'值组'如果有两个及以上的值则需要用小括 ...

  9. nginx Server names

    通配符名称 正則表達式名称 混合名称 优化 兼容性 server名称定义使用的server_name指令和决定哪个server块用于一个给定的请求. 參见"怎样Nginx处理一个请求&quo ...

  10. stm32调试过程中如何判断是程序问题还是硬件问题?

    可以用软件仿真,如果软件仿真时寄存器什么的都正确,而硬件在线仿真时不对,则说明是板子硬件的问题