DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery 前台評論表單驗證實例小結
jQuery 前台評論表單驗證實例小結
編輯:JavaScript綜合知識     

   WordPress 當然也有表單的驗證,不過大家都知道用戶體驗一點都不好,頁面發生跳轉,有時還會把表單清空了,而前台表單認證顯得非常有必要了。以下是我寫的通過改變文本框背景顏色提示用戶輸入內容,WordPress 只要把以下代碼放到 js 文件裡就能工作了。驗證由點擊提交按鈕觸發,工作原理看注釋。

 代碼如下  

//表單驗證
$(function(){
    $('#submit').click(function(){
        var $author=$('#author').val();   //名稱
        var $email=$('#email').val();     //郵箱
        var $url=$('#url').val();         //網址
        var $textarea=$('textarea:first').val();   //評論
        var $errorNo=0;
        if($author==""){
            $('#author').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#author').css("background","#FFF");
        }
        if($email==""){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#email').css("background","#FFF");
        }
        if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
            $('#url').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#url').css("background","#FFF");
        }
        if($textarea==""){
            $('textarea:first').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('textarea:first').css("background","#FFF");
        }
        if($errorNo>0){
            return false;
        }
    });
});

  這樣一個非常簡單的表單驗證就出來了~效果就是小博現在這樣,歡迎指正改進~

  例2

  判斷下拉框是否有選擇:

 代碼如下  

<script type="text/JavaScript">

function CheckForm(){

var AreaValue=$("#DDlAreaList").val();

if(AreaValue=="0")

{

top.Dialog.altert("請選擇區域!");

return false;

}

return true;

}

</scirpt>

 <asp:Button ID="btnSubmit" runat="server" Text="保存並返回" Width="80px" CssClass="blueButtonCss" OnClientClick="return CheckFrom();" OnClick="btnSubmit_Click" />&nbsp;&nbsp;

  關於IBatisNet中SQL語句的使用:

 代碼如下  

<!--<select id="searchDeclaration" resultMap="T_ED_DeclarationResult" parameterClass="T_ED_Declaration">
      SELECT A.* FROM [T_ED_Declaration] A
      <dynamic prepend="WHERE">
        <isNotEmpty prepend=" and" property="Declaration_BatchNO">
          A.Declaration_BatchNO like '%$Declaration_BatchNO$%'
        </isNotEmpty>
        <isNotEqual prepend=" and" property="Declaration_PortName" comparevalue="0">
          A.Declaration_PortName like  '%$Declaration_PortName$%'
        </isNotEqual>
        <isGreaterThan prepend=" and" property="StartTime" compareValue="1900-1-1">
          <![CDATA[
          A.StartTime<= #StartTime#
           ]]>
        </isGreaterThan>
        <isGreaterThan prepend=" and" property="EndTime" compareValue="1900-1-1">
          <![CDATA[
          A.EndTime<= #EndTime#
           ]]>
        </isGreaterThan>
    </dynamic>
    </select>-->

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved