Element的表单校验

实现表单基本结构

vue create login

安装Element(Element - The world's most popular Vue UI framework)官网地址

开发时依赖 ： 开发环境所需要的依赖 -> devDependencies

运行时依赖: 项目上线依然需要的依赖 -> dependencies

安装下载element  npm i element-ui 

在main.js中对ElementUI进行注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

今天做了一个简单的表单案例

<template>
  <div id="app">
    <!-- 卡片组件 -->
    <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-form>
    </el-card>
  </div>
</template>

 先决条件

第一个model属性 (表单数据对象) 在data里面

 data () {
    // 定义表单数据对象
    return {
      loginForm: {
        mobile: '',
        password: ''
      }
    }
  }

 绑定model

 <el-form style="margin-top:40px" :model="loginForm" >

rules规则 先定义空规则

loginRules: {}
<el-form style="margin-top: 50px" model="loginForm" :rules="loginRules">

设置prop属性 （校验谁写谁的字段 ）

<el-form-item prop="mobile">
<el-form-item prop="password">

给input绑定字段属性

<el-input v-model="loginForm.mobile"></el-input>
<el-input v-model="loginForm.password"></el-input>

 

表单校验规则（基本的使用规则）

规则	说明
required	如果为true，表示该字段为必填
message	当不满足设置的规则时的提示信息
pattern	正则表达式，通过正则验证值
min	当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值
max	当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值
trigger	校验的触发方式，change（值改变） / blur （失去焦点）两种，
validator	如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验

   loginRules: {
        mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
          min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
        }]
      }

 

自定义校验规则

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

手动校验的实现

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array | string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array | string)

 

Async 和 Await

针对异步编程，我们学习过Ajax的回调形式，promise的链式调用形式

new Promise(function(resolve, reject){ })

 如果想让Promise成功执行下去，需要执行resolve，如果让它失败执行下去，需要执行reject

new Promise(function(resolve, reject) { 
    resolve('success')  // 成功执行
}).then(result => {
    alert(result)
})

new Promise(function(resolve, reject) { 
    reject('fail')  // 成功执行
}).then(result => {
    alert(result)
}).catch(error => {
     alert(error)
})

 如果想终止在某个执行链的位置，可以用Promise.reject(new Error())

new Promise(function(resolve, reject) {
    resolve(1)
}).then(result => {
    return result + 1
}).then(result => {
    return result + 1
}).then(result => {
  return  Promise.reject(new Error(result + '失败'))
   // return result + 1
}).then(result => {
    return result + 1
}).catch(error => {	
    alert(error)
})

 

异步编程的终极方案 async /await async 和 await必须成对出现

await 表示强制等待的意思，await关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果

 async test () {
      // await总是会等到 后面的promise执行完resolve
      // async /await就是让我们 用同步的方法去写异步
      const result = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(5)
        }, 5000)
      })
      alert(result)
    }

promise可以通过catch捕获，async/ await捕获异常要通过 try/catch（async / await 用同步的方式 去写异步 ）

 async  getCatch () {
      try {
        await new Promise(function (resolve, reject) {
          reject(new Error('fail'))
        })
        alert(123)
      } catch (error) {
        alert(error)
      }
   }