Question

下面的代码显示了如何通过确保表单提交不为空并且可以正常工作来验证 ReactJs 表单。现在，我还要确保表单输入仅包含字母。为此，我不得不使用模式方法，因此此代码pattern="^[a-zA-Z]+$"
下面是如何检查它，但是如果用户输入的不是字母，则不会返回任何错误消息

 <div className={'form-group' + (submitted  &&!user.firstName ? ' has-error' : 'pattern')}>
 {submitted && !user.firstName &&
                            <div className="help-block">The firstName can only contain the letters a-z or A-Z</div>
                        }
</div>

这是工作代码。它通过确保名字不为空来进行验证。通过输入中的Pattern方法，它检查以确保名字仅包含字母，但问题是当用户使用时，它不显示错误消息输入不是字母的值。

<form name="form" onSubmit={this.handleSubmit}>
                    <div>
                        <label htmlFor="firstName">First Name</label>
                        <input type="text" className="form-control" name="firstName"  
pattern="^[a-zA-Z]+$" value={user.firstName} onChange={this.handleChange} />



 <div className={'form-group' + (submitted && !user.firstName ? ' has-error' : '')}>
 {submitted && !user.firstName &&
                            <div className="help-block">First Name is required</div>
                        }
</div>


/*
// Output error message if firstname is not alphabets 

 <div className={'form-group' + (submitted  &&!user.firstName ? ' has-error' : 'pattern')}>
 {submitted && !user.firstName &&
                            <div className="help-block">The firstName can only contain the letters a-z or A-Z</div>
                        }
</div>

*/

                    </div>

                    <div className="form-group">
                        <button">Register</button>


                    </div>
                </form>

例如，下面是我如何在角度6

中实现相同的目的

 <div class="form-group">
      <label>Username</label>
      <input type="text"
            class="form-control"
            name="username"
            [(ngModel)]="login.username"
            #loginUsername="ngModel"
            required
            pattern="^[a-zA-Z]+$">

      <span class="help-block danger" *ngIf="loginUsername.errors?.required  && loginUsername.touched">
        The username is required
      </span>
      <span class="help-block danger" *ngIf="loginUsername.errors?.pattern && loginUsername.touched">
        The username can only contain the letters a-z or A-Z
      </span>
    </div>

Answer 1

您可能无条件将输入值保存到handleChange中的状态。无效状态必须与事件（真实DOM）分开（明确地）读取。

您可以防止在处理程序中使用条件存储错误的状态值，例如

handleChange = e => {
  this.setState( {
    name: e.target.validity.valid ? e.target.value : ""
  })
}

这将阻止所有无效字符（从头开始）。 缺点：在尝试插入无效字符时，它将清除整个有效字符串。

当然，您可以为错误状态设置其他值...并将其用于条件渲染（样式/提示）。

为什么不使用Formik？处理“低级”，“原始” html错误和手动验证可能是过大的选择。这是一个严格的要求吗？

Reactjs模式表单验证未返回错误消息

1 个答案: