* 實現表單輸入框的驗證 ~~~ ?<template> ? <div class="login-wrapper d-flex justify-content-center"> ? <div class=" bg-white login-header rounded p-3 pt-3"> ? <div class="mb-4 d-flex flex-column align-items-center justify-content-center"> ? <div class="d-flex align-items-center"> ? <Icon type="md-briefcase" size="55" color="#2db7f5" /> ? <h3 class="text-muted ml-2">企業網盤</h3> ? </div> ? <span class="text-muted small mt-3">企業級網盤解決方案</span> ? </div> ? <Form ref="formItem" :label-width="0" :model="formItem" :rules="rules"> ? <FormItem prop="username"> ? <Input v-model="formItem.username" placeholder="請輸入用戶名..."></Input> ? </FormItem> ? <FormItem prop="password"> ? <Input type="password" v-model="formItem.password" placeholder="請輸入密碼..."></Input> ? </FormItem> ? <div class="d-flex align-items-center mb-2"> ? <Checkbox v-model="formItem.remember">自動登錄</Checkbox> ? <a href="#" class="ml-auto small">忘記密碼?</a> ? <span class="mx-1">|</span> ? <a href="#" class="small">注冊賬戶</a> ? </div> ? <FormItem> ? <Button type="primary" long ?@click="handleSubmit('formItem')">登錄</Button> ? </FormItem> ? </Form> ? </div> ? </div> ?</template> ?? ?<script> ? export default { ? data() { ? return { ? formItem: { ? username: "", ? password: "", ? remember: false ? }, ? rules: { ? username: [{ ? required: true, ? message: '請輸入用戶名...', ? trigger: 'blur' ? }], ? password: [{ ? required: true, ? message: '請輸入密碼...', ? trigger: 'blur' ? }, ? { ? type: 'string', ? min: 6, ? message: '密碼長度不能小于6位', ? trigger: 'blur' ? } ? ] ? } ? } ? }, ? methods: { ? handleSubmit(name) { ? this.$refs[name].validate((valid) => { ? if (valid) { ? this.$Message.success('Success!'); ? } else { ? this.$Message.error('Fail!'); ? } ? }) ? } ? } ? } ?</script> ?? ?<style scoped="scoped"> ? .login-wrapper { ? height: 100%; ? background-color: #515a56; ? } ?? ? .login-header { ? width: 380px; ? margin-top: 50px; ? height: max-content; ? } ?</style> ~~~