jquery实现注册表单验证
生活随笔
收集整理的這篇文章主要介紹了
jquery实现注册表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【有不對的地方希望大神指正】
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>注冊</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><!--<script type="text/javascript" src="js/register.js"></script>--><script type="text/javascript" src="js/newResister.js"></script></head><body><div class="register_con"><div class="l_con fl"><a class="reg_logo"><img src="images/logo02.png"></a><div class="reg_slogan">商品美 · 種類多 · 歡迎光臨</div><div class="reg_banner"></div></div><div class="r_con fr"><div class="reg_title clearfix"><h1>用戶注冊</h1><a href="#">登錄</a></div><div class="reg_form clearfix"><form><ul><li><label>用戶名:</label><input type="text" name="user_name" id="user_name"><span class="error_tip">提示信息</span></li><li><label>密碼:</label><input type="password" name="pwd" id="pwd"><span class="error_tip">提示信息</span></li><li><label>確認密碼:</label><input type="password" name="cpwd" id="cpwd"><span class="error_tip">提示信息</span></li><li><label>郵箱:</label><input type="text" name="email" id="email"><span class="error_tip">提示信息</span></li><li class="agreement"><input type="checkbox" name="allow" id="allow" checked="checked"><label>同意”商城用戶使用協議“</label><span class="error_tip2">提示信息</span></li><li class="reg_sub"><input type="submit" value="注 冊" name=""></li></ul></form></div></div></div><div class="footer no-mp"><div class="foot_link"><a href="#">關于我們</a><span>|</span><a href="#">聯系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a></div><p>CopyRight ? 2016? xxxxxxx All Rights Reserved</p><p>電話：010-****888? ? 京ICP備*******8號</p></div></body> </html>jquery部分：
$(function () {var sPwd = null; // 用來存儲用戶第一次輸入的密碼var result = true; // 用來存儲each循環判斷后的結果 // 元素獲取焦點的時候，將span內容清空，并顯示$('input').focus(function () {$(this).siblings('span').html('').show()}); // 當元素失去焦點的時候，判斷文本框內容是否符合用戶名的規則和不為空的條件$('input[name=user_name]').blur(function () {var $htm = $(this).val(); //獲取input的值var reUser = /^\w{6,20}$/; // 定義規則 // 如果不為空if ($htm) { //判斷是否符合用戶名條件if (!reUser.test($htm)) {$(this).next().html('用戶名是6到15個英文或數字，還可包含“_”');} // 如果為空則提示錯誤信息} else {$(this).next().html('用戶名不能為空！')}}) // 判斷密碼框內容是否符合密碼的規則和不為空的條件$('input[name=pwd]').blur(function () {sPwd = $(this).val(); //獲取input的值var rePwd = /^[\w!@#$%^&*]{6,20}$/; // 定義規則 // 如果不為空if (sPwd) { //判斷是否符合用戶名條件if (!rePwd.test(sPwd)) {$(this).next().html('密碼是6到15位字母、數字，還可包含@!#$%^&*字符');} // 如果為空則提示錯誤信息} else {$(this).next().html('密碼不能為空！')}}) //判斷兩次輸入的密碼是否一致$('input[name=cpwd]').blur(function () {var $htm = $(this).val(); //獲取input的值 // 如果不為空則判斷是否符合用戶名條件if (sPwd) { //判斷是否符合用戶名條件if ($htm != sPwd) {$(this).next().html('兩次輸入的密碼不一致');}}}) //判斷郵箱是否符合規則且不為空$('input[name=email]').blur(function () {var $htm = $(this).val(); //獲取input的值var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i; // 定義規則 // 如果不為空if ($htm) { //判斷是否符合郵箱名規則if (!reMail.test($htm)) {$(this).next().html('你輸入的郵箱格式不正確');} // 如果為空則提示錯誤信息} else {$(this).next().html('郵箱不能為空！')}}) //判斷是否復選框是否選中$('input[name=allow]').click(function () {if (!$(this).is(':checked')) {$('.agreement span').html('請勾選同意');} else {$('.agreement span').html('');}}) // 提交表單判斷，1 input內容是否為真 2 span沒有內容? 3 復選框是勾選狀態$('form').submit(function () { // 依次查看input是否有內容,如果有為空的，則return false，結束循環，###如果只是return無效果，切記$('input').each(function () {if (!$(this).val()) {result = false;return false;} // 判斷span是否有內容if ($(this).siblings('span').html()) {result = false;return false;}}) // 如果以上結果不為真，則不提交表單，if (!result) {return false;} // 查看復選框是否選中if (!$('input[name=allow]').is(':checked')) {return false;}}) })總結
以上是生活随笔為你收集整理的jquery实现注册表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【整理】1、C网和G网双模手机是否可同时
- 下一篇： 把显存用在刀刃上！17 种 pytorc