element-ui是一个组件库 里面有很多项大家都会用到 其中的表单项验证时比较常用的
比如我们一个登录界面有以下的要求
-
手机号: 必填, 11位移动手机号
-
验证码: 必填, 6位数字
-
协议: 必须勾选
<el-form :model="form" :rules="rulesArr">
<el-form-item prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="form.code" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item prop="check">
<el-checkbox v-model="form.check">我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary">登 录</el-button>
</el-form-item>
</el-form>
<script>
export default {
data () {
return {
form: {
mobile: '',
code: '',
check: false
},
rulesArr: {
mobile: [
{ required: true, message: '请输入正确手机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ }
],
code: [
{ required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
]
}
}
}
}
</script>
-
el-form设置:model="form表单对象"
-
el-form设置:rules="rule规则数组"
-
el-form-item设置prop="form表单对象的属性名"
-
定义rulesArr规则数组里, prop名字对应规则
rulesArr: {
mobile: [
{ required: true, message: '请输入正确手机号', trigger: 'blur', pattern: /^1[3456789]\d{9}$/ }
],
code: [
{ required: true, message: '验证码是6位数字', trigger: 'change', pattern: /^\d{6}$/ }
]
}
这几句的意思
required 必填项 message 错误提示 trigger 触发判断条件(blur 失去焦点)(change 发生改变)
pattern 正则判断
而我们的判断是否阅读协议 需要自己定一个判断条件 那么就涉及到了
自定义校验
// 检验复选框
const checkValidator = (rule, value, callback) => {
// rule规则对象
// value关联表单值
// callback() 回传结果
if (value === false) {
callback(new Error('请勾选协议'))
} else {
callback()
}
}
// 为何不在methods里定义: 因为data初始化时, this还没实例化, 无法访问this.methods里方法
export default {
data () {
return {
form: {
mobile: '',
code: '',
check: false
},
rulesArr: {
// ...其他省略
check: [
{ validator: checkValidator }
]
}
}
}
}
这样就可以简单的判断 表单的 复选框是否点击 如果 为false 就回弹一个 请勾选协议的提醒
如果正确 那么 callback()会继续进行下一项
如果必填项的话 他还会在 左侧提示一个小小的红色* 提高用户体验~
那么 还有一个小问题 如果 你在登陆界面 没有输入内容 直接点击登陆按钮 也是可以直接进入页面
那么我们如何做到 在没有任何输入情况点击登陆时候 判断表单规则呢?
在这里赋予ref=''form'属性
然后在
给一个 submitFn的函数
submitFn () {
// this.$refs.form 为了获取 el-form 组件标签对象(整个表单对象)
// validate() 是form表单对象内置的 会触发表单内所有的校验规则执行一遍
// 校验完毕后 会回调函数体执行 valid变量接到校验最终结果
// 只要有一个没通过 那么 valid直接为false
this.$refs.form.validate((valid) => {
// 有一项没通过表单校验规则, valid就为false
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
}
这样我们点击的时候 他会触发这个函数 然后判断 这个表单的表单规则 如果有一项没有达成 那么就会 返回false 然后 走入else分支 打印error submit!!!!
如果想要提示弹窗 那么就自己加好了