奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > Element框架 >

element-ui2.0.0搭建的后台登录表单

时间:2017-10-23 21:42来源:未知 作者:admin
实现的交互: 1、用户名和密码的及时检验 2、.element-ui2表单组建使用 3、提示组建的使用 源码如下: !DOCTYPE html html head meta charset=UTF-8 titleelement-ui2.0.0搭建的后台登录表单/title !-- 引入样
实现的交互:
1、用户名和密码的及时检验
2、.element-ui2表单组建使用
3、提示组建的使用



源码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>element-ui2.0.0搭建的后台登录表单</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/theme-chalk/index.css">
</head>
<body>
  <div id="app">

  <el-container>
      <el-header>element-ui2.0.0搭建的后台登录表单</el-header>
      <el-main><el-form :model="admin_info" status-icon :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="name">
            <el-input type="text" v-model="admin_info.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="admin_info.pass" auto-complete="off"></el-input>
          </el-form-item>
           
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
        </el-form>
        </el-main>
    </el-container>
    
  </div>

    <!-- 先引入 Vue -->
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcss.com/element-ui/2.0.0-alpha.2/index.js"></script>
  <script>

    new Vue({
      el: '#app',
      data: {
          admin_info:{
              name:'',
              pass:'',
              checkPass:''
         },
         rules: {
          name: [
            { required: true, message: '请输入管理员名称', trigger: 'blur,change' },
          ],
         pass: [
            { required: true, message: '请输入管理员密码', trigger: 'blur,change' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur,change' }
          ],
        }
          },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {

                this.tip(this.admin_info.name+'登录成功!!','success')
              } else {
                this.tip('信息输入有误!!')
                
                return false;
              }
            });
          },
          tip(msg,type='error') {
            this.$message({
              message: msg,
                showClose: true,
              type: type
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
    })
  </script>
</body>

</html> (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路