element----form使用

element----form使用

关于Element-UI中form表单的基本使用。

---

一、Element-UI是什么？

Element-ui是一个基于Vue2.0的组件库，里面有一些现成的组件便于我们提高写代码的成本

二、form表单使用步骤

1.挑选一个接近自己要使用的表单CV

代码如下（示例）：

<el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
  <el-form-item label="手机号" prop="mobile">
    <el-input type="number" placeholder="请输入手机号" v-model="form.mobile" autocomplete="on"></el-input>
  </el-form-item>
  <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="form.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item>
  <el-form-item>
	<el-button
        class="loginBtn"
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="LoginFn"
      >
      登陆</el-button>
  </el-form-item>
</el-form>

2.data

代码如下（示例）：

  data() {
    const validmobile = (rule, value, callback) => { // 验证手机号
      if (!validMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => { // 验证码
      if (value.length < 6) {
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    return {
      form: { // 表单
        mobile: '13800000000',//手机号
        password: '123456'//验证码
      },
      rules: { // 规则
        mobile: [
          { required: true, trigger: 'blur', validator: validmobile }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      loading: false,//控制小圆圈
      passwordType: 'password'
    }
  },

methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    LoginFn(){
    	this.$refs.loginForm.validate(
        async(valid) => {
          // console.log(valid)
          // valid是输入账号密码是否通过正则的结果 是布尔值
          valid ? 通过验证规则走这里 : 没通过
          }
        }
      )
	}
  }

这里只是随便写的校验规则，如果有其他想校验可以用pattern添加正则继续校验

• el-form中的model 属性：为表单绑定数组对象
• el-form的rules属性：配置验证规则
• 给需要验证的每一个 el-form-item 绑定 prop 属性
• prop值 ， 表单数据中的属性名，rules中的属性名要一致
• validate方法是表单组件自带的，用来对表单内容进行检验
• ref 的作用主要用来获取表单组件手动触发验证

注意：rules中的属性名与表单数据项中的属性名是一致的