用戶名、密碼驗(yàn)證

          1

          jquery驗(yàn)證表單很簡(jiǎn)單的方法
          現(xiàn)在網(wǎng)上有很多jquery驗(yàn)證表單的插件,但都寫的比較復(fù)雜。一般都有兩三個(gè)文件。
          我今天寫一個(gè)最簡(jiǎn)單但是很實(shí)用的驗(yàn)證登錄表單的方法。
          我基本上只是給大家提供一種思路。jquery插件一般也是按這個(gè)思路寫的。
          大家可以按這個(gè)思路去擴(kuò)展,不過(guò)只要實(shí)用越簡(jiǎn)單越好

          代碼如下

          <script type="text/javascript">
           //首先要加載jquery庫(kù)文件,因?yàn)檫@里只是給大家演示,所以我就不加載了。
           //下面為jquery代碼
           $(function(){
               $("#name").blur(function(){//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
                  if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只處驗(yàn)證不能為空并且只能為英文或者數(shù)字或者下劃線組成的2-15個(gè)字符
                  {
                      $("#nameTip").html("用戶名不能為空且只能為英文或者數(shù)字");
                  }
                  else
                  {
                      $("#nameTip").html("輸入正確");
                  }

               });

                $("#pas1").blur(function(){//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
                  if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只處驗(yàn)證和上面一樣
                  {
                      $("#pas1").html("密碼不能為空且只能為英文或者數(shù)字");
                  }
                  else
                  {
                      $("#pas1").html("輸入正確");
                  }

               });
               $("#pas2").blur(function(){//用戶名文本框失去焦點(diǎn)觸發(fā)驗(yàn)證事件
                  if(!$(this).val || $(this).val() != $("#pas1").val() )//只處驗(yàn)證和上面一樣
                  {
                      $("#pas2").html("密碼為空或者和上面的密碼不致");
                  }
                  else
                  {
                      $("#pas2").html("輸入正確");
                  }

               });

          })
           </script>
            <form action="#">
              用戶名:<input type="text" id="name" /><span id="nameTip"></span>
              密碼:<input type="password" id="pas1" /><span id="pas1Tip"></span>
              確認(rèn)密碼:<input type="password" id="pas2" /><span id="pas2Tip"></span>
              <input type="submit" value="提交" />
            </form>

          posted on 2011-12-14 23:40 青城幻影 閱讀(13700) 評(píng)論(0)  編輯  收藏

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
           
          主站蜘蛛池模板: 华亭县| 濮阳县| 麻江县| 长泰县| 枝江市| 金平| 孟津县| 乌鲁木齐县| 彰化市| 宁国市| 郧西县| 高唐县| 太康县| 普安县| 凉山| 丘北县| 石棉县| 慈利县| 象山县| 保定市| 会宁县| 靖远县| 通山县| 瓦房店市| 松原市| 景宁| 镇坪县| 靖西县| 青田县| 台南县| 铜山县| 乌拉特后旗| 常熟市| 六盘水市| 辉南县| 济源市| 宜州市| 蒲城县| 裕民县| 青海省| 武功县|