登録されたユーザのフロントエンドロジック
1. Vueの登録インタフェースが用意バインディング
1.インポートVue.jsライブラリとライブラリAJAXリクエスト
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "{{静的（ 'のJS / VUE-2.5.16.js'）}}"> </ SCRIPT>
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "{{静的（ 'のJS / axios-0.18.0.min.js'）}} "> </ SCRIPT>
2. register.jsファイルを準備
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "{{静的（ 'のJS / register.js'）}}"> </ SCRIPT>
2.ヴュー達成するための登録インターフェースを結合
- 重要：Vueのは、たとえば、登録フォームとユーザー名とパスワードを結合します
1.register.html
- バインド内容：変数、イベント、エラーメッセージなど
<FORM METHOD = "POST"クラス= "register_form" @ = "on_submit"提出>
{{csrf_input}}
<UL>
<LI>
<ラベル>用户名：</ラベル>
の<input type = "text"の名=」 USER_NAME」ID = "USER_NAME" Vモデル= "ユーザ名" @ぼかし= "check_username">
<スパンクラス= "error_tip" V-ショー= "error_username"> [[error_username_message]] </ span>を
</ LI>
< LI>
<ラベル>密码：</ label>は
<入力タイプ= "パスワード"名前= "PWD" ID = "PWD" Vモデル= "パスワード" @ = "check_passwordを"ぼかし>
<スパンクラス= "error_tip" V-ショー= "error_password"> [[error_password_message] </スパン>
</ LI>
<LI>
<ラベル>确认密码：</ label>は
<input type = "パスワード"名前= "CPWD" ID = "CPWD" V-モデル= "パスワード2" @ぼかし= "check_confirm_password">
<スパンクラス= "error_tip" V-ショー= "error_confirm"> [[error_confirm_message] ] </ span>を
</ LI>
<LI>
<ラベル>手机号：</ label>は
の<input type = "text" NAME = "電話" ID = "電話" Vモデル= "モバイル" @ブラー=」 check_mobile ">
<スパンクラス=" error_tip」V-ショー= "error_mobile"> [[error_mobile_message]] </ span>を
</ LI>
<LI>
<ラベル>图形验证码：</ label>は
<input type = "text"の名= "pic_code" ID = "pic_code"クラス= "msg_input">
<IMG SRC = "/静的/画像/ pic_code.jpg" ALT = " CAPTCHA"クラス= "pic_code">
<スパンクラス= "error_tip">パターンコードを記入してください。</ span>の
</ LI>
<LI>
<ラベル>短信验证码：</ラベル>
の<input type =」テキスト」名前= "msg_codeお" ID = "msg_codeお"クラス= "msg_input">
<HREF = "javascriptの:;" クラスは= "get_msg_code">获取短信验证码</a>の
<スパンクラス= "error_tip">填写短信验证码</ span>を请
</ LI>
<LIクラス= "一致">
<入力タイプは= "チェックボックス"名前= idは=「許可」=> Vモデルは=「許可」「確認」確認「許可」
<LIクラス= "reg_sub">
の<input type = "提出"値= "注册">
</ LI>
</ UL>
</フォーム>
2.register.js
- バインド内容：変数、イベント、エラーメッセージなど
- ユーザーインタラクションイベントの実現（register.js）
VaRのVM =新しいヴュー（{
エル： '＃アプリ'、
区切り文字：[ "[["、 "]]"]、
データ：{
//接收参数
ユーザ名： ''、
パスワード： ''、
パスワード2： ''、
モバイル： ''、
許可： ''、
//提示标记
error_username：偽、
error_password：偽、
error_confirm：偽、
error_mobile：偽、
error_allow：偽、
//错误信息展示
error_username_message： ''、
error_password_message： ''、
error_confirm_message ： ''、
error_mobile_message： ''、
error_captcha_message： ''、
error_allow_message： ''、
}、
方法：{
//テストユーザ名
check_username：関数（）{
せ再= / ^ [A-ZA-Z0-9 _] {5,20} $ /;
IF（re.test（this.username ））{
falseにthis.error_username =;
}他{
this.error_username_message = 'ユーザー5-20文字を入力してください';
trueにthis.error_username =;
}
}、
//パスワードが検出
check_password：機能（）{
ましょう日時= / ^ [A-ZA-Z0-9] {} $ 8,20 /;
IF（re.test（this.password））{
this.error_password = falseに;
}他{
this.error_password_message = '8-20文字のパスワードを入力してください';
this.error_password = trueに;
}他{
}
}
//パスワードの確認のためのテスト
check_confirm_passwordを：機能（）{
IF（！= This.password2のthis.password）{
this.error_confirm = trueに;
this.error_confirm_message = 'パスワードが一致しない'
}他に{
this.error_confirm偽へ=;
}
}
//電話番号検出
check_mobile：関数（）{
LET再= / ^ 1 [3-9] \ {D}を9 $ /;
IF（re.test（this.mobile））{
この。 = falseをerror_mobileに、
this.error_mobile_message = "有効な電話番号を入力してください";
}
this.error_mobile =はtrue。
}
//提交注册按钮
on_submit：関数（）{
this.check_username（）。
this.check_password（）;
this.check_confirm_password（）;
this.check_mobile（）;
IF（this.error_username ==真|| this.error_password ==真|| this.error_confirm ==真|| this.error_mobile == TRUE）{
window.event.returnValue = FALSE;
}
}
}
}）