經典驗證form表單 js驗證封裝函數

 

1.特效：

 

2：源碼分析：

   

<form action="suppliers.php"  class="edittable"  method="post" name="myform" onsubmit="return checkInformation1();">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="right">分銷商標題：</td>
                                    <td><input name="trader_name" type="text" size="40"class="input" value="{$article.trader_name}" />*</td>
                                </tr>
                                 
                                <tr>
                                    <td align="right">品牌選擇：</td>
                                    <td>
                                        <link href="themes/xaphp2013/sup_images/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
                                        <script src="themes/xaphp2013/sup_images/jquery-1.11.1.min.js"></script>
                                        <script src="themes/xaphp2013/sup_images/jquery.searchableSelectnew.js"></script>
                                        <select name="brand_id" id="brand_id1">
                                            <option value="0" selected="selected">所有品牌</option>
                                            <!--{foreach from=$brand_list item=blist}-->
                                            <option value="{$blist.brand_id}" {if $blist.brand_id eq $article.brand_id } selected="selected" {/if}>{$blist.brand_name}</option>
                                            <!--{/foreach}--></select>
                                        
                                        <script>var newjq = jQuery.noConflict();
                                        newjq(function() {
                                            newjq('#brand_id1').searchableSelect();
                                        });
                                        </script>
                                    </td>
                                </tr>
                                
                                
                                 
                                              
                                 
                                <tr>
                                    <td class="label">
                                        <br />
                                        分銷商專題界面：
                                    </td>
                                    <td>
                                        <br />
                                        <script type="text/javascript" charset="utf-8" src="/api/ueditor/ueditor.config.js"></script>
                                        <script type="text/javascript" charset="utf-8" src="/api/ueditor/ueditor.all.min.js"> </script>
                                        <!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
                                        <!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文-->
                                        <script type="text/javascript" charset="utf-8" src="/api/ueditor/lang/zh-cn/zh-cn.js"></script>
                                        <script id="editor" type="text/plain" style="width:850px;height:500px;">{$article.trader_desc}</script>
                                        <script type="text/javascript">
                                            //實例化編輯器
                                            //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
                                            delete(Object.prototype.toJSONString);
                                            var ue = UE.getEditor('editor');
                                        </script>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">有效截止日期：</td>
                                    <td>
                                     <input type="text" style="float: none;" value="{$article.end_time}" id="end_time" name="end_time" class="input" size="20" readonly="readonly">
                                     <input name="selbtn4" type="button" id="selbtn4" onclick="return showCalendar('end_time', '%Y-%m-%d ', false, false, 'selbtn4');" value="選擇日期" class="button" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">&nbsp;</td>
                                    <input name="act" type="hidden" value="{$act_type}" />
                                    <input name="id" type="hidden" value="{$article.id}" />
                                     
                                    <td><input type="submit"  value="提交"  class="btn"/></td>
                                </tr>
                            </table>
                        </form>

 

    

function editPassword()
{
  var frm              = document.forms['formPassword'];
  var old_password     = frm.elements['old_password'].value;
  var new_password     = frm.elements['new_password'].value;
  var confirm_password = frm.elements['comfirm_password'].value;

  var msg = '';
  var reg = null;

  if (old_password.length == 0)
  {
    msg +=  '舊密碼不能為空\n';
  }

  if (new_password.length == 0)
  {
    msg +=  '新密碼不能為空\n';
  }

  if (confirm_password.length == 0)
  {
    msg += '確認密碼不能為空\n';
  }

  if (new_password.length > 0 && confirm_password.length > 0)
  {
    if (new_password != confirm_password)
    {
      msg +=   '新密碼倆次輸入不一致\n';
    }
  }

  if (msg.length > 0)
  {
    alert(msg);
    return false;
  }
  else
  {
    return true;
  }
}
function checkInformation(){
    if(document.myform.title.value=='')
    {
        alert('請輸入標題');
        return false;
    }
    if(document.myform.description.value=='')
    {
        alert('文章摘要不能為空');
        return false;
    }
    if(document.getElementById('brand_id1').value=='' || document.getElementById('brand_id1').value==0 )
    {
        alert('請選擇品牌');
        return false;
    }
}

function checkInformation1(){
    if(document.myform.trader_name.value=='')
    {
        alert('請輸入品牌標題');
        return false;
    }
    if(document.myform.editor.value=='')
    {
        alert('專題頁不能為空');
        return false;
    }
    if(document.myform.endtime.value=='')
    {
        alert('時間不能為空');
        return false;
    }
    if(document.getElementById('brand_id1').value=='' || document.getElementById('brand_id1').value==0 )
    {
        alert('請選擇品牌');
        return false;
    }
}
function checkarticle()
{
    if(document.myform.title.value=='')
    {
        alert('請輸入標題');
        return false;
    }
    if(document.myform.cat_id_3.value=='')
    {
        alert('請選擇對應的三級分類');
        return false;
    }
    if(document.myform.description.value=='')
    {
        alert('文章摘要不能為空');
        return false;
    
    }
    if(document.myform.keywords.length>30)
    {
    
        alert('關鍵字不大於30個字');
        return false;
    }
    if(document.myform.description.length>90)
    {
    
        alert('描述不大於90個字');
        return false;
    }
    
    return true;

}

 重點：可以 http://www.cnblogs.com/wcm19910616/articles/5603960.html對alert comfirm框進行美化界面 直接調用就行