Element之表单验证

Element的表单验证

目录

• Element的表单验证
  • 组件渲染
    • 调用表单组件
  • 数据绑定
    • 组件绑定
  • 表单验证
  • 表单重置

组件渲染

调用表单组件

<!-- 表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
        <!-- 用户名密码 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
        </el-form-item>
        <!-- 按钮  -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

这一步没有什么特别好说的，主要还是组件的渲染
配置icon图标 prefix-icon="el-icon-user"
注意：在每次渲染的时候需要导入加载的组件

数据绑定

组件绑定

export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在5-10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6-15个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate(valid => {
        console.log(valid)
      })
    }
  }
}

上述步骤之后我们可以发现，按钮是不会生效的，也就是说，没有绑定data的input标签
无法进行输入、校验等功能
通过v-model实现双向绑定，将文本框中的内容绑定到data的loginForm属性中

表单验证

根据element ui的写法，通过在主体表单上添加loginFormRules
methods实现校验规则，在鼠标离开之后调用loginFormRules，验证表单中的属性值
prop="username"检索所要调用验证的规则

表单重置

通过点击事件，调用resetLoginForm事件，
再通过this.$refs.loginFormRef.resetFields()将数据置空
此时的this指向当前说指向的VueComponent

这个地方我有个疑问：
在vue中原则是不调用dom属性，但是这就是调用了$refs属性
也就是在页面数据加载完了，dom渲染之后通过调用dom实现数据清空