赞
踩
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!!!!
如果想要提示弹窗 那么就自己加好了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。