分类
Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。
一、统一放在一个文件
组件
html：
<Form ref="refAddCityClass" :model="addCityClass" :rules="ruleAddCityClass" :label-width="100" >
<FormItem label="城市类别：" prop="className">
<Input type="text" v-model="addCityClass.className" :maxlength="15" placeholder="请输入城市类别名称" clearable/>
</FormItem>
</Form>
<Button type="primary" @click="methodAddCityClass">确认</Button>
js:
// 验证的文件，放在一个文件中统一管理
import validate from '@/utils/validate'
data () {
return {
addCityClass: {
className: ''
},
ruleAddCityClass: validate,
}
},
methods: {
methodAddCityClass() {
// 这里一定要写，只有验证通过后才会执行
this.$refs['refAddCityClass'].validate(valid => {
if (valid) {
// 如果验证通过，执行的一些操作，比如调接口等
} else {
// 如果验证不通过执行的一些操作
}
})
},
}
validate.js
const validateNameZh = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('请输入名称'))
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
return callback(new Error('请输入中英文数字下划线，不能输入特殊字符'))
} else {
callback()
}
}
// 这里可以继续写其他验证规则
const validate = {
className: [
{
required: true,
validator: validateNameZh,
trigger: 'blur'
}
],
// 这里可以继续写其他要验证的字段
}
export default validate
二、放在各自的组件中
组件
html：
<Form ref="refAddCityClass" :model="addCityClass" :rules="ruleAddCityClass" :label-width="100" >
<FormItem label="城市类别：" prop="className">
<Input type="text" v-model="addCityClass.className" :maxlength="15" placeholder="请输入城市类别名称" clearable/>
</FormItem>
</Form>
<Button type="primary" @click="methodAddCityClass">确认</Button>
js:
可以放在script标签引入文件的下面
const validateNameZh = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('请输入名称'))
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
return callback(new Error('请输入中英文数字下划线，不能输入特殊字符'))
} else {
callback()
}
}
data () {
return {
addCityClass: {
className: ''
},
ruleAddCityClass: {
className: [
{
required: true,
validator: validateNameZh,
trigger: 'blur'
}
],
// 这里可以继续写其他要验证的字段
}
}
},
methods: {
methodAddCityClass() {
this.$refs['refAddCityClass'].validate(valid => {
if (valid) {
// 如果验证通过，执行的一些操作，比如调接口等
} else {
// 如果验证不通过执行的一些操作
}
})
},
}
其他问题
在Modal模态框中使用表单的话验证不生效
解决办法：使用模态框的自定义页脚，关闭按钮等，在方法调用后先进行验证，验证通过后进行其他操作，随后把模态框关闭。
html：
<Modal width="400" v-model="setModal" title="修改全局设置" :mask-closable="false">
<Form ref="refSet" :model="formSet" :rules="ruleSet" :label-width="100" >
<FormItem label="默认差标金额" prop="defaultPrice">
<Input type="text" v-model="formSet.defaultPrice" style="width: 200px;"/>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="cancel">取消</Button>
<Button type="primary" @click="ok">确认</Button>
</div>
</Modal>
js：
ok () {
this.$refs['refSet'].validate(valid => {
if (valid) {
// 在其他操作(调接口等)完成后，将模态框关闭
this.setModal = false
}
})
},
cancel () {
this.setModal = false
},
数字验证不生效
{type: 'number', message: '请输入数字', trigger: 'blur'}
上面这种验证方式是不生效的，即使生效也会出现其他问题（当不止验证数字时，同时验证不为空等）
解决办法：使用自定义验证方式
const validateNumber = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('不能为空'))
} else if (!/^[0-9]*$/.test(value)) {
return callback(new Error('请输入数字'))
} else {
callback()
}
}
number: [{ required: true, trigger: 'blur', validator: validateNumber }],
