Vue Validate验证表单的实例

第一步:加上rules 与ref

<el-form ref="ourform" :model="form" :rules="rules" label-width="120px">
    ...
</el-form>



ref的用处:获取表单,减少获取dom的消耗,详见 vue $refs的基本用法-减少获取dom节点的消耗

rules的用处:对表单字段制定校验规则进行校验


第二步:el-form-item加上prop

<el-form ref="ourform" :model="form" :rules="rules" label-width="120px">
    <el-row>
        <el-col :span="12">
          <el-form-item label="登录账号名" prop="uLoginName">
            <el-input ref="uLoginName" v-model="form.uLoginName" name="uLoginName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="uLoginPWD">
            <el-input v-model="form.uLoginPWD" />
          </el-form-item>
        </el-col>
      </el-row>
    ...
</el-form>


第三步:制定第一步提到的rules 表单校验规则

<script>
export default {
    data() {
        return {
            rules: {
                uLoginName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                uLoginPWD: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            }
            ......
        }
    }
    ......
}
</script>



第四步:提交按钮

<el-button type="primary" @click="onSubmit">创建</el-button>

<script>
export default {
    ......
    methods: {
        onSubmit() {
          console.log(this.$refs.ourform)
          this.$refs.ourform.validate(valid => {
            if (valid) {
              this.$message('submit!')
            } else {
              console.log('error submit!!')
              return false
            }
          })
        }
    }
    ......
}
</script>


第五步:点击验证按钮 测试验证功能

image.png

到此 表单校验功能已经完成了。


以下附上常用表单校验JS:elValidate.js

// 手机号
export function validatePhone(rule, value, callback) {
  if (value === '' || value === undefined) {
    return callback(new Error('手机号码不能为空'))
  } else {
    const re = /^1[23456789]\d{9}$/
    if (!re.test(value)) {
      return callback(new Error('手机号码输入格式有误'))
    }
    return callback()
  }
}
// 邮箱
export function validateEmail(rule, value, callback) {
  if (value === '' || value === undefined) {
    callback(new Error('邮箱号码不能为空'))
  } else {
    var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    if (!reg.test(value)) {
      callback(new Error('请输入有效的邮箱'))
    }
    callback()
  }
}

// 验证密码
export function validatePass(rule, value, callback) {
  if (value === '') {
    callback(new Error('请设置正确格式的密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度最小6位'))
  } else {
    callback()
  }
}

// 验证身份证
export function validateIdentityCard(rule, value, callback) {
  if (value === '') {
    callback(new Error('身份证必须填写'))
  } else {
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (!reg.test(value)) {
      callback(new Error('请输入有效的身份证'))
    }
  }
}
// 验证日期
export function validateDate(rule, value, callback) {
  if (value === '' || value === undefined) {
    callback()
  } else {
    console.log(value)
    var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
    if (!reg.test(value)) {
      callback(new Error('您输入的日期格式有误'))
    }
  }
}
// 验证日期时间
export function validateDateTime(rule, value, callback) {
  if (value === '' || value === undefined) {
    callback()
  } else {
    var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
    if (!reg.test(value)) {
      callback(new Error('您输入的日期时间格式有误'))
    }
  }
}

使用方法

import { validateDate } from '@/utils/elValidate'

<script>
export default {
    data() {
        return {
            rules: {
                ......
                birth: [{ validator: validateDate, trigger: 'blur' }]
                ......
            }
            ......
        }
    }
    ......
}
</script>



转载请说明出处:原文链接 http://www.nbsite.cn/qdjs/226
标签: VUE

相关阅读:

vue中全屏screenfull.js的使用

vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

Vuex的五个核心概念state、getters、mutations、actions、modules

vue组件name命名规范