常见的vue技术栈组件库
- 移动端（Vant, Cube-UI, NutUI ）
- PC端 （ element-ui, Ant Design of Vue, iView）
- 小程序: uniapp
安装elementUI:
npm i element-ui
#OR
yarn add element-ui
main.js引入并注册
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Form表单组件-表单验证
基本步骤-共三步
1._定义验证规则。
data()中按格式定义规则
data() {
return {
rules: {
// 字段名1：表示要验证的属性
// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
// 数组中的多条规则会按顺序进行
字段名1: [
{ 验证规则1 },
{ 验证规则2 },
],
字段名2: [
{ 验证规则1 },
{ 验证规则2 },
],
}
}
}
注意: 字段名 与 prop 与 绑定的数据名 三者一致
2._在模板上做属性配置来应用规则（三个配置）
给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
示例:
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
required => 值为bool值, 规定是否是必填项
message=> 值为字符串, 规定提示的消息
trigger => 值为字符串(事件名),规定什么事件来触发校验
min => 值为 number ,规定用户输入的最小长度
max => 值为 number ,规定用户输入的最大长度
pattern => 值为正则表达式, 规定校验的规则
3.手动兜底验证
element-ui的表单组件.validate(valid => {
if(valid) {
// 通过了验证
} else {
// 验证失败
}
})
支持promise语法:
methods: {
async onSubmit() {
try {
const res = await this.$refs.form.validate();
console.log(res);
} catch (error) {
console.log(error);
}
},
},
补充 :
- validate 方法是表单组件自带的，用来对表单内容进行检验。
- 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
示例代码:
doLogin () {
alert('我可以做登录了')
},
submit () {
this.$refs.form.validate(valid => {
// valid 就是表单验证的结果，如果是true，表示通过了
// console.log(valid)
if (valid) {
// 通过了验证，你可以做后续动作了
this.doLogin()
}
})
}
4.0自定义检验规则
rules:{
属性名1: [
{
// 注意参数顺序
validator(rule, value, callback) {
// rule：采用的规则
// value: 被校验的值
// callback是回调函数，
// 如果通过了规则检验，就直接调用callback()
// 如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
// 例如：callback(new Error('错误说明'))
},
trigger: 'blur'
}]
}
示例代码:
rules: {
name: [{required: true, message:'必须要填入', triggle: 'blur'}],
code: [
{
validator(rule, value, callback)=>{
console.log(rule, value, callback)
if(value === '123456') {
callback(new Error('这是世界上最差的密码了'))
} else {
callback()
}
},
triggle: 'blur'
},
{min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
{required: true, message:'必须要填入', triggle: 'blur'},
]
}
注意:
- 自定义规则可以让校验逻辑更加灵活，它的格式是固定的
- callback必须调用
5.0重置表单清理校验痕迹
校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。
语法:
this.$refs.form组件的引用.resetFields()
这个方法可以
- 清理校验痕迹
- 恢复表单默认数据
