素敵なバリデータフォーム検証プラグインを使用するのは簡単
序文
フロントエンドのフォーム検証は、偽のデータ、毒性データの最初のステップは、データのセキュリティは、我々は100％でないが、サーバー上のクライアントによって送信されたデータ（実際のチェックがあることを持っていることを信じることができますが、最初のハードルである無効なデータをフィルタリングすることです）が、プロジェクトでは、ここで記録するためにそれを使用し、フロントエンドのフォームの検証が非現実的なチェックするために、フォームフィールドのロジックコードを記述することも不可欠ですが、またホイールを作成する必要はありませんが、jQueryプラグインを使用すると良い選択です設定素敵なバリデータフォーム検証プラグインが使用するのは簡単です
：開発者に優しい、記述のより多くを教えてくださいどのようなネットワークの、シンプル、スマート、気持ちの良いフォーム検証プログラム、使いやすく、豊富な設定項目、自由度の高い、バリの素敵なhttps://validator.niceue.com/
コーディング
私たちは、テストが素敵なバリデータを使用して、一例として、ログインフォーム、登録フォームのIMシステムをチェック
ダウンロード（https://github.com/niceue/nice-validator/releases/tag/1.1.4）をダウンロードnice-validator-1.1.4.zip重要なファイルは、他にダウンロードした後にのみ残し、我々は削除され、その後、一般的なヘッドhead.htmlで導入されています
使用
次の2つの方法で使用すてきな-バリ：
：（1）、DOMは、JSコード、参照することなく、ルールを結合https://validator.niceue.com/docs/dom-bindings.html典型的JSにおける第二の構成ルールを使用して、
（2）、JS構成ルール、非侵襲的なDOM
//ログイン提出する
機能をログイン（）{
$（ "loginForm番号"）バリ（{。
ルール：カスタムルール{//
}、
フィールド：{//設定ルール
のuserName： '必要な;'、
パスワード： '必要な;'
} 、
メッセージ：{//チェックを迅速にカスタマイズ失敗
}、
有効：機能（）{//コールバックによって検証
$ .post（CTX + "/ imsUser /ログイン"、$（ "＃のloginForm"）serializeObject（）,. 機能（データ）{
IF（data.flag）{
window.location.href = CTX + "/ imsUser / socketChart /" + data.data.userName + "の.html"
}他{
//ティップ先端
チップ。MSG（data.msg）。
}
}）;
}
}）トリガー（ "検証"）。
}
ビルトインルール
プラグ内蔵8つのルール：
- 必要 - フィールドが必要です
- 確認 - 必要な、あなたはまた、選択した項目の数を制御することができます
- 試合 - 別のフィールドに現在のフィールドを比較します
- リモート - サーバ認証結果取得
- 整数 - 整数のみを埋めます
- レンジ - だけの数の指定した範囲を埋めます
- 長さ - 長さの値を指定する必要があります
- フィルタ - 現在のフィールドのフィルタ値は、検証されていません
同じ名前のビルトインルールとカスタムルール場合は、カスタムルールが優先されます
カスタムルール
。$（「＃のあるmyForm」）バリ（{
ルール：{//カスタムルール
それを行うことができ、単一の定期的な検証するために使用することを意図し、正規の直接の使用を、
ルールがヒントを通過していない場合、通常の配列の小包やエラーメッセージを使用して、// 1をメッセージ
モバイル：[/ ^ 1 [3458 ] \ D {9} $ / ' 電話番号の形式を確認してください']、
// 2、または直接メッセージパラメータの下に書かれた定期的な、追加のカスタムエラーメッセージを（定義Li）と、プロンプトメッセージまたはデフォルト
携帯電話：/ ^ 1 [3458] \ D {9} $ /
第二に、関数を使用して、最大限の柔軟性を備えた実施形態の機能を、異なる検証は異なる検証結果をもたらす、任意の戻り値を取得：
// 1、.TEST組み込み（）trueの場合返すことによって、ルールが一致するか否かを検出する方法であって、そうでなければ、エラーメッセージ使用して
携帯電話：機能（要素のparams）を{
} / 1 ^ [3458] \ {Dを返す9 $を/。テスト（element.value）||「の電話番号の形式を確認してください」;
}
// 2、カスタム検証アヤックス
//あなたはたったの$アヤックスを返す、と説明上記の戻り値を持つ行の応答を確認する必要があり、他のプラグインが自動的に処理されます。
ユーザ名： '必須;'
//もちろん、あなたも何かを行うために、成功コールバックを追加したり、独自のカスタムヘッダーを追加することができます
モバイル：機能（要素）{
リターンの$アヤックス（{
URL：[チェック/ username.php '
タイプの「POST '
データ：element.name +' = '+ element.value、
データ型：' JSON '
}）;
}
詳細については、関数のカスタムルールとすることができます。https：//validator.niceue.com/docs/custom- rules.html
}
フィールド：{//構成規則（使用規則）
電話：「必要な;移動」、
メッセージ：{//カスタム検証がヒント失敗した
携帯電話を：「電話番号の形式を確認してください」
}、
}、
有効：関数（）{//コールバック認証による
}
}）トリガー（ "検証"）;.
カスタムテーマ
ルールが付属していても、すでに、テーマの一部の比較的小さな、比較的醜いスタイルですが、幸い、我々は（ZH-CN.js）内の言語ファイルに導入されているルールの一部を定義します
いくつかのテーマ（結果がありますが、:)突くしてください：https://validator.niceue.com/releases/1.1.4/demo/option-theme.html、我々が使用yellow_right_effectを、アニメーションがあり、良く見えます
しかし、我々はプロジェクトを置くときのdivボックスが部分的に閉塞した外
したがって、我々は、カスタムテーマ、およびグローバルコンフィギュレーションを宣言head.htmlで、ZH-CN.jsを参照してください。
head.html
スコープルール
（1）グローバル
使用して $.validator.config()（例えば：ZH-CN.js）ローカル構成ファイル内の構成を推奨任意のインスタンスでは、ルールにフィールドのいずれかにアクセスすることができます
$（.validator.config
{：ルール
モバイル：[/ ^ 1 [3-9] \ {D} 9 $ /、 "有効な電話番号を入力してください"。]、
中国語：[/ ^ [\ u0391- \ uFFE5]を+ $ /、] "漢字をご記入ください"
}
）;
（2）現在のインスタンス
インスタンスのための、唯一の有効な初期化パラメータ渡しの認証を呼び出すときにコール
$("#myForm").validator(
rules: {
mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"]
}
);
(3). 当前字段
只能通过 DOM 方式在表单元素上定义
<input name="demo" data-rule="required;xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']">
效果演示
登录表单
登录校验简单一点，就一个非空校验就OK了
//提交登录
function login() {
$("#loginForm").validator({
rules: {//定制规则
},
fields: {//配置规则（使用规则）
userName: 'required;',
password: 'required;'
},
messages: {//定制校验失败提示
},
valid: function () {//验证通过，回调
$.post(ctx + "/imsUser/login", $("#loginForm").serializeObject(), function (data) {
if (data.flag) {
window.location.href = ctx + "/imsUser/socketChart/" + data.data.userName + ".html"
} else {
// tip提示
tip.msg(data.msg);
}
});
}
}).trigger("validate");
}
效果
注册表单
注册的时候判断账号是否已经存在，我们之前是这样做的
现在做如下修改，先在controller新增一个查询接口，去掉保存方法里面的校验
修改js代码
//提交注册
function register() {
$("#registerForm").validator({
rules: {//定制规则
reusername: function (element) {
return _ajax({
url: ctx + '/imsUser/reusername',
type: 'post',
data: element.name +'='+ element.value,
dataType: 'json'
});
}
},
fields: {//配置规则（使用规则）
userName: 'required;reusername',
password: 'required',
nickName: 'required',
email: 'required;email',
phone: 'required;mobile',
},
messages: {//定制校验失败提示
reusername:"账号已存在！！！"
},
valid: function () {//验证通过，回调
let newTime = commonUtil.getNowTime();
$("#createdTime").val(newTime);
$("#updataTime").val(newTime);
$("#avatar").val("/image/logo.png");
$.post(ctx + "/imsUser/save", $("#registerForm").serializeObject(), function (data) {
if (data.flag) {
switchover();
}
// tip提示
tip.msg(data.msg);
});
}
}).trigger("validate");
}
効果
追伸
ここで終了する記事は、追加のパラメータ素敵なバリデータチェックプラグの構成は、方法は、イベントは、公式文書などへの特定のアクセスを紹介してください：https://validator.niceue.com/docs/