React JS組件中的jQuery Validator插件不驗證電話號碼

我有一個電話號碼輸入的反應組件，我試圖驗證電話號碼。但是，當我輸入偶數字符時，驗證器返回TRUE。下面是代碼：React JS組件中的jQuery Validator插件不驗證電話號碼

var ProfileStore = require('../../../stores/profile/profile-store.js'); 
(function(win) { 
    "use strict"; 
var OwnerPhone = React.createClass({ 
    mixins: [Router.Navigation, PropyIntlMixin], 
    phoneChanged: function() { 
     var inputEl = this.refs.owner_phone.getDOMNode(); 
     var phone = inputEl.value; 
     this.validatePhone(); 
     ProfileStore.updatePhone(phone); 
    }, 

    validatePhone: function() { 
     $('.owner_phone_input').validate({ 
     rules:{ 
      OwnerPhone: { 
      phoneUS: true, 
      required: true 
      } 
     }, 
     }); 
     $(".btn-block").click(function() { 
      alert("Valid: " + $(".owner_phone_input").valid()); 
      return false; 
     }); 
    }, 

    render: function() { 
     return(
     <div className="form-group-input"> 
      <input name="OwnerPhone" 
      ref="owner_phone" 
      className="form-control input-lg owner_phone_input" 
      type="text" 
      placeholder={this.getIntlMessage('manage-profile-content.type-in-phone-number')} 
      value={this.props.phone}/> 
      <div className="btn btn-info btn-lg btn-block" onClick={this.phoneChanged}>UPDATE PHONE</div> 
     </div> 
     ); 
    } 
    }); 

    module.exports = OwnerPhone; 
    })(window);

我想我做錯事與jQuery的HTML標籤選擇。沒有提交按鈕或表單標籤，但按下按鈕時按預期觸發該功能。

來源

2015-12-10 Henry Lynx

「沒有提交按鈕或表單標籤......」

雖然可以創建一個觸發驗證沒有submit按鈕的處理函數，你絕對不能做任何驗證外的<form></form>容器。這就是jQuery Validate插件的設計。沒有解決方法。

「...但按鈕被擊中時按預期觸發該功能。」

哪個功能？ .validate()方法僅用於初始化<form>上的插件。如果你沒有使用正確的HTML結構，那麼插件將不會做任何事情。

的phoneUS規則要求列入the additional-methods.js file。

來源

2015-12-12 18:41:50 Sparky

React JS組件中的jQuery Validator插件不驗證電話號碼

回答

相關問題