1 创建项目
$ vue create xxxx
2 安装elelemgt
$ npm i element-ui
3 注册
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
根据官网的信息做一个简单的登录页面
找到卡片组件 截取自己需要的信息 -多余的删除
Card 卡片
<el-card class='login-card'>xxxx </el-card>
Form 表单
因需要带有验证的效果所以 使用
表单验证
根据需要 保留自己想要的 并且更改
<el-card class="login-card">
<el-form style="margin-top: 50px">
<el-form-item>
<el-input placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%">登录</el-button>
</el-form-item>
</el-card>
css的样式简单的修改一下
body {
margin: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 440px;
height: 300px;
}
根据需求 进行表单的校验 和自定义的校验
在校验之前 要有先决的条件
el_form=> 绑定的model属性/rules规则
el-form-item =>设置prop属性
el-input=>v-model绑定属性
建立model熟悉 也就是表单的数据对象
data () {
// 定义表单数据对象
return {
loginForm: {
mobile: '',
password: ''
}
}
}
再去绑定model
<el-form :model="loginForm" >
绑定rules规则
rules: {
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]}
设置prop
<el-form-item prop="mobile">
<el-form-item prop="password">
绑定input字段属性
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
//密码框以此类推
根据需求添加自己的自定义规则
rules: {
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
{
trigger: 'blur',
validator: validateMoble,
},
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur' },
],
},
完整的代码
<template>
<div id="app">
<!-- 卡片组件 -->
<el-card class="login-card">
<!-- 登录表单 -->
<el-form :model="ruleForm" :rules="rules" ref="text" style="margin-top: 50px">
<el-form-item prop="mobile">
<el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%" @click="submitForm('text')">登录</el-button>
</el-form-item>
<el-button @click="resetForm('text')">重置</el-button>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
var validateMoble = (rule, value, callback) => {
value.charAt(2) === '8' ? callback() : callback(new Error('第三位手机号必须是8'))
}
return {
ruleForm: {
mobile: '',
password: '',
},
rules: {
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
{
trigger: 'blur',
validator: validateMoble,
},
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur' },
],
},
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
},
},
}
</script>
<style>
body {
margin: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 440px;
height: 300px;
}
</style>