材料设计精简与ReactJS表单验证

Question

我在ReactJS render（）函数中有一个注册表单。它有标准的密码重新输入字段，我想确保如果密码字段不匹配，则会显示错误消息“＆＃39;提交＆＃39;点击。还有一个空密码字段的额外检查似乎是多余的 - 如果该字段是必需的并且为空，则您将期望它无效。我怀疑有一种干净的方式以与Material Design Lite一致的方式执行此操作。

我目前的尝试位于https://jsfiddle.net/5oh0yu72/4/，代码如下。

== external resources ==
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-with-addons.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js
https://code.getmdl.io/1.1.3/material.indigo-pink.min.css
https://fonts.googleapis.com/icon?family=Material+Icons
https://code.getmdl.io/1.1.3/material.min.js

== HTML ==
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

== JS ==
var Register = React.createClass({
  getInitialState: function(){
    return {
      password: "",
      passwordRetyped: ""
    }
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var registerForm = document.getElementById('register');
    var formElements = registerForm.elements
    var elementCount = formElements.length
    var i = 0;
    for(;i<elementCount;i++){
      var elem = formElements[i]
      if(elem.checkValidity == false){
        alert("a field is invalid")
        return false
      }
    }
    var passwordElem = document.getElementById('password');
    var passwordRetypedElem = document.getElementById('passwordRetyped');
    if(passwordRetypedElem.value != passwordElem.value) {
      alert("The passwords do not match");
      return false;
    }
    if(passwordRetypedElem.value == '') {
      alert("The passwords are empty")
      return false;
    }
    return true;
  },

  handlePasswordChange: function(e) {
    return this.setState({password: e.target.value})
  },

  handlePasswordRetypedChange: function(e) {
    return this.setState({passwordRetyped: e.target.value})
  },

  render: function() {
    return <div >
      < form id="register" className = "register" onSubmit={this.handleSubmit} >
        < div className = "content-grid mdl-grid" >
          < div className = "mdl-cell mdl-cell--12-col mdl-typography--text-center mdl-textfield mdl-js-textfield mdl-textfield--floating-label" >
            < input className = "mdl-textfield__input"
              id = "password"
              type = "password"
              pattern = "[A-Z,a-z,0-9\?@\$%&\*\-_=+!~\.,\/\\]*"
              value = {
                this.state.password
              }
              onChange = {
                this.handlePasswordChange
              }
            required /> 
            < label className = "mdl-textfield__label"
              htmlFor = "password" > password * 
            < /label> 
            < span className = "mdl-textfield__error" >                   Input can only contain letters, numbers, and some special characters! 
            < /span> 
          < /div>
          < div className = "mdl-cell mdl-cell--12-col mdl-typography--text-center mdl-textfield mdl-js-textfield mdl-textfield--floating-label" >
            < input className = "mdl-textfield__input"
    id = "passwordRetyped"
    type = "password"
    pattern = "[A-Z,a-z,0-9\?@\$%&\*\-_=+!~\.,\/\\]*"
    value = {
      this.state.passwordRetyped
    }
    onChange = {
      this.handlePasswordRetypedChange
    }
            required /> 
            < label className = "mdl-textfield__label"
    htmlFor = "passwordRetyped" > retype password * < /label>             < span className = "mdl-textfield__error" > Input can only contain letters, numbers, and some special characters! 
            < /span> 
          < /div>

          < div className = "mdl-cell mdl-cell--12-col" > 
            < input className = "mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored mdl-textfield--full-width"
    type = "submit"
    value = "Register" / >
          < /div> 

          < div className = "mdl-cell mdl-cell--12-col" > 
            <p className='mdl-typography--headline mdl-typography--text-center'> * indicates a required field</p>
          < /div> 

        < /div > 
      < /form > 
    < /div >;
  }
});

ReactDOM.render( < Register / > ,
  document.getElementById('container')
);

它使用alert（）来标记不匹配的密码，但我看到一些解决方案使用nav元素来保存错误消息。只是寻找一种良好，一致的方法来做到这一点。

谢谢！