Edit:
Действительно, JSR 303 является лучшим способом (IMO) для обработки проверки на стороне клиента. Лучше всего то, что если у вас есть правильные библиотеки js на фронте, вы можете использовать ту же проверку (тот же код) на сервере (если вы используете node.js).
Для этого я создал библиотеку @ stopopa / validation . Я проверяю формы, подобные этой (In React.js):
import React, { Component } from "react";
import ReactDOM from "react-dom";
import validator, {
Collection,
Required,
Optional,
NotBlank,
Length,
Email,
} from "@stopsopa/validator";
class App extends Component {
constructor(...args) {
super(...args);
this.state = {
data: {
name: "",
email: ""
},
errors: {},
validate: false
};
}
onSubmit = async e => {
e.preventDefault();
const errors = await validator(this.state.data, new Collection({
name: new Required([
new NotBlank(),
new Length({min: 3}),
]),
email: new Required([
new NotBlank(),
new Email(),
])
}));
this.setState({
errors: errors.getFlat(),
validate: true,
});
if ( ! errors.count()) {
console.log('send data to server', this.state.data);
}
};
onChange = (name, value) => {
this.setState(state => ({
...state,
data: { ...state.data, ...{ [name]: value } }
}));
};
render() {
const s = this.state;
return (
<form onSubmit={this.onSubmit}>
<label>
name:
<input
value={s.data.name}
onChange={e => this.onChange("name", e.target.value)}
/>
</label>
{s.validate && s.errors.name && (
<div className="error">{s.errors.name}</div>
)}
<br />
<label>
email:
<input
value={s.data.email}
onChange={e => this.onChange("email", e.target.value)}
/>
</label>
{s.validate && s.errors.email && (
<div className="error">{s.errors.email}</div>
)}
<br />
<input type="submit" value="submit" />
</form>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
живой пример доступен здесь: https://codesandbox.io/s/ymwky9603j