一.ajax

1.

<script type="text/javascript">
       //驗證原密碼1.ajax,正則
       var ok1=false,ok2=false,ok3=false;
       $(function () {

           $("[name=upass]").blur(function () {
               var upass=$(this).val();
               $.ajax({
                   url:"/user/updatepassword",
                   data:
 
"upass="+upass,
                   type:"post",
                   datatype:"text",
                   success:function (rs) {
                       if ('原密碼正確'==rs) {
                           ok1=true;
                       }else {
                           ok1=false;
                       }
                       $(
 
"[name=upass]").next().html("<font color='red'>"+rs+"</font>");
                   }
                   });
           });

       //驗證新密碼
           $("[name=userPs]").blur(function() {
               var newpass=$(this).val();
               var reg=/^\w{6,}$/;
               if(reg.test(newpass)){
                   $(
 
this).next().html("新密碼可用");
                   ok2=true;
               }else {
                   $(this).next().html("新密碼不可用");
                   ok2=false;
               }
           });


       //驗證重複密碼格式，是否與新密碼相同
           $("[name=newpass2]").blur(function () {
               var newpass2=$(this).val();
               var newpass=$("[name=userPs]").val();
               var reg=/^\w{6,}$/;
               if(reg.test(newpass2)){
                   if (newpass==newpass2){
                       $("[name=newpass2]").next().html("兩次密碼一致");
                       ok3=true;
                   } else {
                       $("[name=newpass2]").next().html("兩次密碼不一致");
                       ok3=false;
                   }
               }else {
                   $(this).next().html("重複密碼不可用");
                   ok3=false;
               }
           });

           //提交表單
           $("#button2").click(function () {
               if(ok1&&ok2&&ok3){
                    document.forms[0].submit();
               }else{
                   alert("輸入有誤")
               }
           });

       });


   </script>

處理ajax請求返回

2.jquery的validate

匯入

jquery.validate.js

編寫validate程式碼

 <script type="text/javascript">
        $(function(){
            $("form").validate({
                rules:{
                    upass:{required:true,
                        remote:"/user/updatepassword"},
                    userPs:{required:true,minlength:6},
                    newpass2:{required:true,equalTo:"#userPs"}
                },
                messages:{
                    upass:{
                        required:"請輸入原密碼",
                        remote:"與原密碼不一致"
                    },
                    userPs:{
                        required:"請輸入新密碼",
                        minlength:"新密碼至少6位"
                    },
                    newpass2:{
                        required:"請輸入重複密碼",
                        equalTo:"兩次密碼要一致"
                    }
                }
            })
        })


    </script>