经典验证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框进行美化界面 直接调用就行