这篇文章时关于如何使用iview的form表单校验。主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验。
1.为需要校验的表单添加form标签
<!--注意: ref/rules/model/prop等属性是必须的-->
<Form res="foemRef" :rules="formRules" :model="formData" v-if="liveNode">
<Row>
<!--正常校验-->
<Col>
<FormItem prop="name">
<Input v-model="formData.name"></Input>
</FormItem>
</Col>
<!--动态校验-->
<Col v-if="flag">
<FormItem prop="age">
<Input v-model="formData.age"></Input>
</FormItem>
</Col>
<!--异步校验-->
<Col>
<FormItem prop="asyName">
<Input v-model="formData.asyName"></Input>
</FormItem>
</Col>
</Row>
</Form>
2.添加校验规则
formRules: {
name: [
{required: true, message: "必输项不能为空", trigger: 'blur'},
{validator:(rule, value, cb)=>{lenValid(value, 30, cb)}, trigger: 'blur'}
],
age:[], // 注意因为age是根据条件判断是否必输,先留个坑
asyName: [ // 异步校验,使用change触发,即使不改变输入数据也会在提交数据的时候自动校验一次
{validator:(rule, value, cb)=>{asyValid(value, cb)}, trigger: 'change'}
]
}
3.校验方法
// 校验输入的字符长度
function lenValid(str, num, cb){
if(str){
let len = getLen(str)
if(len > num){
return cb(new Error('Too Long...'))
}
}
cb()
}
// 获取字符长度
function getLen(str){
let len = 0
if(str){
str = str + '' // to string
for(let i=0; i<str.length; i++){
let c = str.charCodeAt(i)
if((c >= 0x0001 && c <= 0x007e) || (0xff60 < = c && c <= 0xff9f)){
len++ // 单字节
}else{
len += 3 // 汉字
}
}
}
return len
}
4.动态添加校验规则
有时候需要动态切换一个输入框,比如:上面的age字段,显示的时候是必输项,隐藏的时候是非必输的,这个时候需要动态的修改校验规则
this.liveNode = flase // 先抹去Form,等校验规则修改后在重新渲染
if(this.flag){
this.formRules.age.unShift({required: true, message: '必输项'})
}else{
if(this.formRules.age.length > 0){
this.formRules.age.shift()
}
}
this.liveNode = true // 重新渲染Form
5.异步校验
有时候输入的内容需要到后台异步校验
// 异步校验 - 成败都要有回调函数,校验失败抛出异常
function asyValid(value, cb){
let param = {asyName: value} // 将需要校验的值作为参数
$http(url,action,param,(res)=>{
cb()
},(err)=>{
cb(new Error(err.data.message))
})
}
原文地址:https://www.cnblogs.com/codebook/p/11332824.html
时间: 2024-10-09 23:16:48