Question

我有一个带有电话号码输入的反应组件，我正在尝试验证电话号码。但是当我输入偶数字符时，验证器返回TRUE。这是代码：

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标签选择器做错了。没有提交按钮或表单标签，但按下按钮时按预期触发该功能。

Answer 1

＆＃34;没有提交按钮或表单标签......＆＃34;

虽然可以创建一个在没有submit按钮的情况下触发验证的处理函数，但绝对不能在<form></form>容器之外进行任何验证。这就是jQuery Validate插件的设计方式。没有解决方法。

＆＃34; ...但是当按下按钮时，按预期触发该功能。＆＃34;

哪个功能？ .validate()方法仅用于初始化<form>上的插件。如果您没有使用正确的HTML结构，那么该插件将不执行任何操作。

phoneUS规则要求包含the additional-methods.js file。

React JS组件中的jQuery Validator插件不会验证电话号码

1 个答案: