用bootstrapValidator來驗證UEditor

我們的專案使用了bootstrapValidator來作為前端校驗，但是表單裡面有一個UEditor，它用bootstrapValidator是沒有效果的，為了頁面風格統一，只好修修改改咯

先來看看修改後的效果

 

上面的UEditor是我們的業務需要調整成這樣的，首先我們先把基本的結構寫一寫

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="padding-top:15px;width:100%"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="defaultForm"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-12 form-group"</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="labelId"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="control-label col-sm-1 form-group"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="font-weight:normal;"</span><span style="color: #0000ff;">><br></span>　　　　　　　　UEditor测试<br><span style="color: #0000ff;">　　　　　　　</</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-11 form-group"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="divId"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="UEId"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/plain"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="inputId"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="inputName"<br /></span><span style="color: #ff0000;">               style</span><span style="color: #0000ff;">="height:0px;border:0px;margin:0px;padding:0px"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="modal-footer col-sm-12"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-primary"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="btn_save"</span><span style="color: #0000ff;">></span>保存<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

特別注意，我在UEditor後面加了一個文本框，這個文本框的作用就是為了存儲UEditor的內容的，既然你UEditor不能使用bootstrapValidator來做校驗，那我就加一個能用做校驗的文本框唄，然後把input用style="height:0px;border:0px;margin:0px;padding:0px;"這種方式隱藏起來，特別注意的是不能用display:none來隱藏，這樣的話驗證也會隨之一起隱藏起來的。

然後現在自然是不起作用的啦，我們現在加上對文字框內容的驗證就好了吧

 $('#defaultForm'<span style="color: #000000;">).bootstrapValidator({
            message: </span>'验证未通过'<span style="color: #000000;">,
            feedbackIcons: {
                valid: </span>'glyphicon glyphicon-ok'<span style="color: #000000;">,
                invalid: </span>'glyphicon glyphicon-remove'<span style="color: #000000;">,
                validating: </span>'glyphicon glyphicon-refresh'<span style="color: #000000;">
            },
            fields: {
                inputName: {</span><span style="color: #008000;">//</span><span style="color: #008000;">所提交的控件name属性</span>
                    message: '所提交的数据不能为空'<span style="color: #000000;">,
                    validators: {
                        notEmpty: { </span><span style="color: #008000;">//</span><span style="color: #008000;">非空提示</span>
                            message: '填写的数据不能为空'<span style="color: #000000;">
                        },
                    }
                },
            }
        }).on(</span>'success.form.bv', <span style="color: #0000ff;">function</span><span style="color: #000000;"> (e) {          
            e.preventDefault();          
            </span><span style="color: #0000ff;">var</span> $form =<span style="color: #000000;"> $(e.target);
            </span><span style="color: #0000ff;">var</span> bv = $form.data('bootstrapValidator'<span style="color: #000000;">);
            </span><span style="color: #008000;">//</span><span style="color: #008000;">这里提交表单</span>
            $.post('address'<span style="color: #000000;">, {
                data: </span>"data"<span style="color: #000000;">
            }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (result) {
                alert(result);
            });
        });   </span>

試一試，果然不行，因為咱們的UEditor和隱藏的文字內容還沒同步呢，而且應該在我們在UEditor輸入內容的時候就進行同步！

所以我們就在UEditor的contentChange事件裡面去同步嗎？ ？

咋一看好像沒什麼問題，但你會發現，這些按*&%￥之類的特殊符號在輸入的時候根本就不會觸發contentChange事件，

這下子就尷尬了，繼續解決吧！

這裡我們要解決2個問題，一個是contentChange事件，特殊符號無法觸發的問題，還一個賦值，重新驗證的問題。

先看第一個問題特殊符號無法觸發的問題，先來看看UEditor產生之後是什麼樣子的吧

這裡找到了一個iframe，看來UEditor的內容都藏在這裡了吧，只要監聽這裡面的內容改變事件，就應該可以解決第一個問題了吧

還有第二個問題，直接上程式碼

 editor = UE.getEditor("UEId"<span style="color: #000000;">, {
            initialFrameHeight: </span>40<span style="color: #000000;">
        }).ready(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
            </span><span style="color: #0000ff;">var</span> editor = UE.getEditor("UEId"<span style="color: #000000;">);
            </span><span style="color: #008000;">/*</span><span style="color: #008000;">找到UEditor的iframe</span><span style="color: #008000;">*/</span>   
            <span style="color: #0000ff;">var</span> contents = $('#UEId').find('iframe'<span style="color: #000000;">).contents();
            </span><span style="color: #0000ff;">var</span> fn = <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
                $(</span>"#inputId").val(UE.getEditor("UEId"<span style="color: #000000;">).getContent());
                $(</span>'#defaultForm').data('bootstrapValidator')<span style="color: #008000;">//</span><span style="color: #008000;">重新验证inputName</span>
                  .updateStatus('inputName', 'NOT_VALIDATED', <span style="color: #0000ff;">null</span><span style="color: #000000;">)
                  .validateField(</span>'inputName'<span style="color: #000000;">);                      
            }

            </span><span style="color: #0000ff;">if</span> (document.all) {<span style="color: #008000;">//</span><span style="color: #008000;">document.all识别是否在IE下，在IE下为true</span>
                contents.get(0).attachEvent('onpropertychange', <span style="color: #0000ff;">function</span><span style="color: #000000;"> (e) {
                    fn();
                });
            } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                contents.on(</span>'input'<span style="color: #000000;">, fn);
            }
        });</span>

這裡賦值之後必須 用bootstrapValidator的updateStatus加validateField方法重新驗證一遍，然後我們再試一次

仔細看，裡面還有三個問題，一個問題是邊框沒有隨著一起變顏色，第二個是右邊沒有√和×的圖標，第三個是直接點保存是不觸發驗證的。

好吧，咱們一個一個來解決！第一個，邊框為什麼沒有變顏色？其實很正常，因為我們是對一個隱藏的文字框做的驗證，要變色應該也是那個文字框變吧

好的，那我們就加一段js，讓邊框的顏色跟左邊label的顏色一樣就可以了，所以在UEditor的每次重新驗證之後裡加一段程式碼

  $($('#UEId div')[0]).css('border-color', $('#labelId').css('color')); 

第二個問題，讓√×顯示出來，這個就有點麻煩，一點一點的調樣式，最後發現一個解決辦法，在ueditor.css檔中找到.edui-default .edui-editor這個類別

把它的position變成 position: initial;然後在UEditor的ready方法中將它的margin-top調成和工具列一樣就可以了

  <span style="color: #0000ff;">var</span>  margintop = $($('#UEId .edui-editor-toolbarbox')[0<span style="color: #000000;">]).height();
  $($(</span>'#divId i')[0]).css('margin-top', margintop);

最後一個最好解決，在form的submit中加上這樣一段程式碼就好了

$('#defaultForm').submit(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
            $(</span>'#defaultForm').data('bootstrapValidator')<br>　　　　　　　　.updateStatus('inputName', 'NOT_VALIDATED', <span style="color: #0000ff;">null</span>)<br>　　　　　　　　.validateField('inputName'<span style="color: #000000;">);<br>$($(</span>'#UEId div')[0]).css('border-color', $('#labelId').css('color')); 
        })

終於可以看到最終的效果了，而且我們提交表單的時候可以直接拿文本框的val()了，不想要多加一個判斷if(是UEditor){....}了.最終附上整個html的內容

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="Scripts/bootstrap.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span> <span style="color: #0000ff;">/></span>   
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="bootstrapValidator.min.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span> <span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">      
        .form-control-feedback </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin-right</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>       
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="padding-top:15px;width:100%"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="defaultForm"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-12 form-group"</span><span style="color: #0000ff;">></span>

            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="labelId"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="control-label col-sm-1 form-group"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="font-weight:normal;"</span><span style="color: #0000ff;">><br></span>　　　　　　　　UEditor测试<br><span style="color: #0000ff;">　　　　　　</</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-sm-11 form-group"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="divId"</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="UEId"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/plain"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
                <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="inputId"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="inputName"<br /></span><span style="color: #ff0000;">　　　　　　　　 style</span><span style="color: #0000ff;">="height:0px;border:0px;margin:0px;padding:0px"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="modal-footer col-sm-12"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="btn btn-primary"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="btn_save"</span><span style="color: #0000ff;">></span>保存<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="jquery-1.9.1.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="Scripts/bootstrap.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="bootstrapValidator.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/ueditor.config.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/ueditor.all.min.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="zh_CN.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="UEeditor/lang/zh-cn/zh-cn.js"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;">
    $(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {    
        editor </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, {
            initialFrameHeight: </span><span style="background-color: #f5f5f5; color: #000000;">40</span><span style="background-color: #f5f5f5; color: #000000;">
        }).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> editor </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
            </span><span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">找到UEditor的iframe</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
           <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;">  margintop </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId .edui-editor-toolbarbox</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).height();
           $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#divId i</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">margin-top</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, margintop);
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> contents </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).find(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">iframe</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).contents();
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> fn </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
                $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#inputId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).val(UE.getEditor(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">UEId</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).getContent());
                $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">重新验证inputName</span>
<span style="background-color: #f5f5f5; color: #000000;">                  .updateStatus(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">NOT_VALIDATED</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">)
                  .validateField(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
               $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId div</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#labelId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">));                
            }

            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (document.all) {</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">document.all识别是否在IE下，在IE下为true</span>
<span style="background-color: #f5f5f5; color: #000000;">                contents.get(</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">).attachEvent(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">onpropertychange</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (e) {
                    fn();
                });
            } </span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;"> {
                contents.on(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">input</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, fn);
            }
        });

        $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).submit(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () {
            $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)<br>　　　　　　.updateStatus(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">NOT_VALIDATED</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">)<br>　　　　　　.validateField(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">inputName</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
            $($(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#UEId div</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">]).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">border-color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#labelId</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).css(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">color</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)); </span>
<span style="background-color: #f5f5f5; color: #000000;">        })

        $(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#defaultForm</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).bootstrapValidator({
            message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">验证未通过</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
            feedbackIcons: {
                valid: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-ok</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                invalid: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-remove</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                validating: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">glyphicon glyphicon-refresh</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
            },
            fields: {
                inputName: {</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">所提交的控件name属性</span>
<span style="background-color: #f5f5f5; color: #000000;">                    message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">所提交的数据不能为空</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
                    validators: {
                        notEmpty: { </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">非空提示</span>
<span style="background-color: #f5f5f5; color: #000000;">                            message: </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">填写的数据不能为空</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">
                        },
                    }
                },
            }
        }).on(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">success.form.bv</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (e) {          
            e.preventDefault();          
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> $form </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $(e.target);
            </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> bv </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> $form.data(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">bootstrapValidator</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
            </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">这里提交表单</span>
<span style="background-color: #f5f5f5; color: #000000;">            $.post(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">address</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, {
                data: </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">data</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">
            }, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (result) {
                alert(result);
            });
        });             
    })
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>

裡面用到的一些bootstrap，jquery啥的自己記得加上去，另外中秋佳節快要到了，提前祝大家節日快樂！