Vue でログインと登録テンプレートを実装するためのサンプルコード

<テンプレート>
	<p class="ログイン">
		<el-tabs v-model="アクティブ名" @tab-click="ハンドルクリック">
			<el-tab-pane label="ログイン" name="first">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="名前" prop="名前"><el-input v-model="ruleForm.name"></el-input></el-form-item>
 
					<el-form-item label="パスワード" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
 
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">ログイン</el-button>
 
						<el-button @click="resetForm('ruleForm')">リセット</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
 
			<el-tab-pane label="登録" name="second">
				<登録></登録>
			</el-tab-pane>
		</el-tabs>
	</p>
</テンプレート>
 
<スクリプト>
'@/components/register' からレジスタをインポートします。
 
エクスポートデフォルト{
	データ（） {
		var validPass = (ルール、値、コールバック) => {
			（値 === ''）の場合{
				callback(new Error('パスワードを入力してください'));
			} それ以外 {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
 
				折り返し電話（）;
			}
		};
 
		戻る {
			アクティブ名: 'first',
			ルールフォーム: {
				名前： ''、
				合格： ''、
				チェックパス: ''
			},
			ルール:
				名前: [{ 必須: true、メッセージ: '名前を入力してください'、トリガー: 'ぼかし' }、{ 最小: 2、最大: 5、メッセージ: '長さは 2 文字から 5 文字の間でなければなりません'、トリガー: 'ぼかし' }]、
				パス: [{ 必須: true、バリデータ: validPass、トリガー: 'blur' }]
			}
		};
	},
 
	メソッド: {
		//タブ切り替え handleClick(tab, event) {},
		//フォームをリセットする resetForm(formName) {
			this.$refs[フォーム名].resetFields();
		},
		//フォームを送信する submitForm(formName) {
			this.$refs[formName].validate(valid => {
				（有効）の場合{
					this.$メッセージ({
						タイプ: '成功'、
						メッセージ: 「ログインに成功しました」
					});
					this.$router.push('home');
				} それ以外 {
					console.log('送信エラー!!');
					false を返します。
				}
			});
		}
	},
	コンポーネント:
		登録する
	}
};
</スクリプト>
 
<スタイル lang="scss">
。ログイン {
	幅: 400ピクセル;
	マージン: 0 自動;
}
 
.el-tabitem {
	テキスト配置: 中央;
	幅: 60ピクセル;
}
</スタイル>

//コンポーネントを登録する <テンプレート>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="ユーザー名" prop="名前"><el-input v-model="ruleForm.name"></el-input></el-form-item>
		<el-form-item label="パスワード" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
		<el-form-item label="パスワードの確認" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">登録</el-button>
			<el-button @click="resetForm('ruleForm')">リセット</el-button>
		</el-form-item>
	</el-form>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
	データ（） {
		var validPass = (ルール、値、コールバック) => {
			（値 === ''）の場合{
				callback(new Error('パスワードを入力してください'));
			} それ以外 {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				折り返し電話（）;
			}
		};
 
		var validPass2 = (ルール、値、コールバック) => {
			（値 === ''）の場合{
				callback(new Error('パスワードをもう一度入力してください'));
			} そうでない場合 (値 !== this.ruleForm.pass) {
				callback(new Error('2回入力されたパスワードが一致しません!'));
			} それ以外 {
				折り返し電話（）;
			}
		};
 
		戻る {
			アクティブ名: 'second',
			ルールフォーム: {
				名前： ''、
				合格： ''、
				チェックパス: ''
			},
			ルール:
				名前: [{ 必須: true、メッセージ: '名前を入力してください'、トリガー: 'ぼかし' }、{ 最小: 2、最大: 5、メッセージ: '長さは 2 文字から 5 文字の間でなければなりません'、トリガー: 'ぼかし' }]、
				パス: [{ 必須: true、バリデータ: validPass、トリガー: 'blur' }],
				checkPass: [{ 必須: true、バリデータ: validatorPass2、トリガー: 'blur' }]
			}
		};
	},
 
	メソッド: {
		送信フォーム(フォーム名) {
			this.$refs[formName].validate(valid => {
				（有効）の場合{
					this.$メッセージ({
						タイプ: '成功'、
						メッセージ: 「登録が完了しました」
					});
					// this.activeName: 'first',
				} それ以外 {
					console.log('送信エラー!!');
					false を返します。
				}
			});
		},
 
		resetForm(フォーム名) {
			this.$refs[フォーム名].resetFields();
		}
	}
};
</スクリプト>

<テンプレート>
  <el-row type="flex" justify="center">
   <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="login()">
    <el-form-item prop="userName" label="ユーザー名"><el-input v-model="formData.userName" placeholder="ユーザー名を入力してください" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
    <el-form-item prop="password" label="パスワード"><el-input v-model="formData.password" placeholder="パスワードを入力してください" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
    </el-form-item>
    <el-form-item><el-button type="primary" class="btn" @click="login('formData')" icon="el-icon-upload">ログイン</el-button>
     <el-button @click="resetForm('formData')">リセット</el-button></el-form-item></el-form-item>
     <router-link to="register">パスワードがありませんか?登録</router-link>
   </el-form>
  </el-row>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（） {
  戻る {
   フォームデータ: {
    ユーザー名: ''、
    パスワード: ''
   },
   ルール:
    ユーザー名: [{ 必須: true、メッセージ: 'ユーザー名は空にできません'、トリガー: 'blur' }]、
    パスワード: [{ 必須: true、メッセージ: 'パスワードは空欄にできません'、トリガー: 'blur' }]
   }
  };
 },
 メソッド: {
  ログイン(フォーム名) {
 
    this.$refs[formName].validate(valid => {
				（有効）の場合{
					this.$メッセージ({
						タイプ: '成功'、
						メッセージ: 「ログインに成功しました」
          });
           this.$router.push({name:'home'});
				} それ以外 {
					console.log('送信エラー!!');
					false を返します。
				}
			});
  },
   resetForm(フォーム名) {
			this.$refs[フォーム名].resetFields();
		}
 }
};
</スクリプト>

<テンプレート>
  <el-row type="flex" justify="center">
   <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="register()">
    <el-form-item prop="userName" label="ユーザー名"><el-input v-model="formData.userName" placeholder="ユーザー名を入力してください" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
    <el-form-item prop="password" label="パスワード"><el-input v-model="formData.password" placeholder="パスワードを入力してください" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
    <el-form-item prop="cheackPassword" label="パスワードの確認"><el-input v-model="formData.cheackPassword" placeholder="パスワードをもう一度入力" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="register('formData')" icon="el-icon-upload">登録</el-button>
      <el-button @click="resetForm('formData')">リセット</el-button></el-form-item>
     <router-link to="login">すでにパスワードをお持ちですか?ログイン</router-link>
 
   </el-form>
  </el-row>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 データ（） {
   var validPass = (ルール、値、コールバック) => {
			（値 === ''）の場合{
				callback(new Error('パスワードをもう一度入力してください'));
			} そうでない場合 (値 !== this.formData.password) {
				callback(new Error('2回入力されたパスワードが一致しません!'));
			} それ以外 {
				折り返し電話（）;
			}
		};
 
  戻る {
   フォームデータ: {
    ユーザー名: ''、
    パスワード: ''、
    パスワードを確認してください:''
   },
   ルール:
    ユーザー名: [{ 必須: true、メッセージ: 'ユーザー名は空にできません'、トリガー: 'blur' }]、
    パスワード: [{ 必須: true、メッセージ: 'パスワードは空欄にできません'、トリガー: 'blur' }]、
    checkPassword: [{ 必須: true、検証: v​​alidator: validPass、トリガー: 'blur' }]
 
   }
  };
 },
 メソッド: {
  登録(フォーム名) {
   this.$refs[formName].validate(valid => {
				（有効）の場合{
					this.$メッセージ({
						タイプ: '成功'、
						メッセージ: 「登録が完了しました」
          });
           this.$router.push({name:'login'});
				} それ以外 {
					console.log('送信エラー!!');
					false を返します。
				}
			});
  },
  resetForm(フォーム名) {
			this.$refs[フォーム名].resetFields();
		}
 
 }
};
</スクリプト>