基于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://***/Article/44043

總結

以上是生活随笔為你收集整理的基于jQuery会员中心安全修改表单代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。