vue=＞温故知新element表单校验异步编程终极⽅案Asyncawait Element的表单校验补充
我们尝试通过⼀个案例对Element的表单校验进⾏⼀下补充
实现表单基本结构
创建项⽬
$ vue create login
选择babel / eslint
安装Element
开发时依赖 ： 开发环境所需要的依赖 -> devDependencies
运⾏时依赖: 项⽬上线依然需要的依赖 -> dependencies
$ npm i element-ui
在main.js中对ElementUI进⾏注册
import ElementUI from'element-ui';
import'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
接下来，利⽤Element组件完成如图的效果
代码如下
<template>
<div id="app">
<!-- 卡⽚组件 -->
<el-card class='login-card'>
<!-- 登录表单 -->
<el-form >
<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" >登录</el-button>        </el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
width: 100%;
height: 100vh;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 440px;
height: 300px;
}
</style>
表单校验的先决条件
接下来，完成表单的校验规则如下⼏个先决条件
model属性 (表单数据对象)
data(){
// 定义表单数据对象
return{
loginForm:{
mobile:'',
password:''
}
}
}
绑定model
<el-form :model="loginForm" >
rules规则 先定义空规则，后续再详解
loginRules:{}
<el-form model="loginForm":rules="loginRules">
设置prop属性
校验谁写谁的字段
<el-form-item prop="mobile">
...
<el-form-item prop="password">
.
..
给input绑定字段属性
<el-input v-model="bile"></el-input>
<el-input v-model="loginForm.password"></el-input>
表单校验规则
此时，先决条件已经完成，要完成表单的校验，需要编写规则
ElementUI的表单校验规则来⾃第三⽅校验规则参见
我们介绍⼏个基本使⽤的规则
规则说明
required如果为true，表⽰该字段为必填
message当不满⾜设置的规则时的提⽰信息
pattern正则表达式，通过正则验证值
min当值为字符串时，min表⽰字符串的最⼩长度，当值为数字时，min表⽰数字的最⼩值max当值为字符串时，max表⽰字符串的最⼤长度，当值为数字时，max表⽰数字的最⼤值trigger校验的触发⽅式，change（值改变） / blur （失去焦点）两种，
validator如果配置型的校验规则不满⾜你的需求，你可以通过⾃定义函数来完成校验
校验规则的格式
{ key(字段名): value(校验规则) => [{}] }
根据以上的规则，针对当前表单完成如下要求
⼿机号 1.必填 2.⼿机号格式校验 3. 失去焦点校验
密码 1.必填 2.6-16位长度 3. 失去焦点校验
规则如下
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(回调函数))
var func=function(rule, value, callback){
// 根据value进⾏进⾏校验
/
/ 如果⼀切ok
// 直接执⾏callback
callback()// ⼀切ok 请继续
// 如果不ok
callback(new Error("错误信息"))
}
根据以上要求，增加⼿机号第三位必须是9的校验规则
await和async使用方法如下
// ⾃定义校验函数
const checkMobile=function(rule, value, callback){
value.charAt(2)==='9'?callback():callback(new Error('第三位⼿机号必须是9'))
}
mobile:[
{ required:true, message:'⼿机号不能为空', trigger:'blur'},
{ pattern:/^1[3-9]\d{9}$/, message:'请输⼊正确的⼿机号', trigger:'blur'},{
trigger:'blur',
validator: checkMobile
}],
⼿动校验的实现
最后⼀个问题，如果我们直接点登陆按钮，没有离开焦点，那该怎么校验 ？
此时我们需要⽤到⼿动完整校验
form表单提供了⼀份API⽅法，我们可以对表单进⾏完整和部分校验
⽅法名说明参数
validate 对整个表单进⾏校验的⽅法，参数为⼀个回调函数。该回调函数会在校验结束后被调⽤，并传⼊
两个参数：是否校验成功和未通过校验的字段。若不传⼊回调函数，则会返回⼀个 promise
Function(callback:
Function(boolean, object))
validateField对部分表单字段进⾏校验的⽅法Function(props: array | string, callback: Function(errorMessage: string))
resetFields对整个表单进⾏重置，将所有字段值重置为初始值并移除校验结果—
clearValidate 移除表单项的校验结果。传⼊待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则
移除整个表单的校验结果
Function(props: array | string)
这些⽅法是el-form的API，需要获取el-form的实例，才可以调⽤
采⽤ref进⾏调⽤
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
调⽤校验⽅法
login(){
// 获取el-form的实例
this.$refs.loginForm.validate(function(isOK){
if(isOK){
// 说明校验通过
// 调⽤登录接⼝
}
})// 校验整个表单
}
Async 和 Await
针对异步编程，我们学习过Ajax的回调形式，promise的链式调⽤形式
ajax回调模式
// 回调形式调⽤
$.ajax({
url,
data,
success:function(result){
$.ajax({
data:result,
success:function(result1){
$.ajax({
url,
data: result1
})
}
})
}
})
promise的链式回调函数
// 链式调⽤没有嵌套
axios({ url, data}).then(result =>{
return axios({ data:result })
}).then(result1 =>{
return axios({ data:result1 })
}).then(result2 =>{
return axios({ data: result2 })
}).then(result3 =>{
return axios({ data: result3 })
})
关于Promise你必须知道⼏件事
关于Promise你必须知道⼏件事
如何声明⼀个Promise
new Promise(function(resolve, reject){})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。