zoukankan      html  css  js  c++  java
  • 使用element-ui框架的积累(一)

    自定义表单校验

    <template>
      <div class="login-area container-area">
        <h3 class="set-center">
          <router-link to="/login">登录</router-link>
          <el-divider direction="vertical"></el-divider>
          <router-link to="/register">注册</router-link>
        </h3>
        <el-form ref="form" :rules="formRules" :model="form">
          <el-form-item prop="username">
            <el-input
              placeholder="用户名"
              v-model="form.username"
              clearable
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="密码"
              v-model="form.password"
              clearable
              show-parssword
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-row>
              <el-col :span="17">
                <el-input
                  placeholder="验证码"
                  v-model="form.code"
                  prefix-icon="el-icon-mobile"
                ></el-input>
              </el-col>
              <el-col :span="7">
                <div class="code-area">
                  <Identity :changeCode.sync="identifyCode"></Identity>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    import Identity from "@/components/Identity";
    export default {
      name: "Login",
      components: {
        Identity
      },
      data() {
        const codeValid =(rule, value, callback)=>{
          console.log(value)
          console.log(this.identifyCode)
          if (value!=this.identifyCode) {
            callback(new Error("验证码输入错误"));
          } else {
            callback();
          }
        };
        return {
          form: {
            username: "",
            password: "",
            code: "" //验证码
          },
          identifyCode: "", //随机生成的验证码
    
          formRules: {
            username: [
              { required: true, message: "请输入用户名", trigger: "blur" },
              { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" }
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" }
            ],
            code: [
              { required: true, message: "请输入验证码", trigger: "blur" },
              { validator: codeValid, trigger: "blur" }
            ]
          }
        };
      },
      created() {
        document.getElementsByTagName("body")[0].style.background = "#f5f5f5";
      },
      mounted() {
        console.log(this.identifyCode)
      },
      methods: {
        // 提交信息
        onSubmit() {
          // console.log(this.$refs["form"])
          this.$refs["form"].validate((valid)=>{
            if(valid){
              alert("submit")
            }else{
              alert("error")
            }
          })
        },
        // 重置信息
        onReset() {}
      }
    };
    </script>
    
    <style scoped>
    .container-area {
       400px;
      margin: 0px auto;
      margin-top: 10%;
      background-color: #ffff;
      padding: 20px;
    }
    .set-center {
      text-align: center;
      font-weight: 500;
      
    }
    .set-center > a {
      text-decoration: none;
      color: #409EFF;
    }
    .code-area {
      cursor: pointer;
    }
    .router-link-active{
      font-weight: bold;
    }
    </style>

    自定义表单校验的时候

     const codeValid =(rule, value, callback)=>{
          if (value!=this.identifyCode) {
            callback(new Error("验证码输入错误"));
          } else {
            callback();
          }
        };
    codeValid的结果是一个箭头函数,不然“this.属性名”获取不到data中定义的属性.
     
  • 相关阅读:
    jQuery文件上传插件Uploadify(转)
    最简单易懂的SpringCloudSleuth教程
    微信协议简单调研笔记
    Base64 image
    javascript身份证号码验证
    基于微信的产品设计01:注册登录及账号体系设计
    android端 socket长连接 架构
    win7管理工具不可用
    http和socket之长连接和短连接区别
    Socket 长连接与短连接,心跳
  • 原文地址:https://www.cnblogs.com/shanchui/p/14353962.html
Copyright © 2011-2022 走看看