表单验证规则的使用

验证规则

身份证验证

// 设置身份证号的验证规则
    const idCard = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入身份证号'))
      } else {
        const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的身份证号'))
        }
      }
    }

手机号验证

// 设置手机号的验证规则
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入联系方式'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的电话'))
        }
      }
    }

密码验证

    // 设置密码的验证规则
    const checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.loginForm.checkPass !== '') {
          this.$refs.loginForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 设置确认密码的验证规则
    const checkPassAgain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

名字验证

    // 英名验证
    const enName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入英文名'))
      } else {
        const reg = /^[a-zA-Z]+$/ // 验证没有空格的英文名
        // const reg = /^[a-zA-Z][A-Za-z\s]*[a-zA-Z]*$/ 验证有空格的英文名
        if (value.length < 100 && reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的英文名'))
        }
      }
    }
    // 中名验证
    const chnName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入中文名'))
      } else {
        const reg = /^[\u4e00-\u9fa5]+$/
        if (value.length < 100 && reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的中文名'))
        }
      }
    }

邮箱验证

  // 验证邮箱
      const validateEmail = (rule, value, callback) => {
          if (/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value) || !value) {
            callback()
          } else {
            callback(new Error('请输入正确邮箱'))
          }
       }

在组件中使用

<template>
  <div class="register">
      <el-card class="register-card">
        <div slot="header" class="clearfix">
            <span>注册</span>
        </div>
        <el-form status-icon label-width="140px" :rules="rules" ref="loginForm" :model="loginForm" style="margin-top:20px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="loginForm.checkPass" placeholder="请再次输入密码"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="loginForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="短信验证" class="Verification" style="width:530px" prop="verifyCode">
                <!-- 验证码 -->
                <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码" style="width:50%"></el-input>
                <!-- 发送验证码 -->
                <el-button icon="el-icon-mobile-phone" @click="send" style="width: 40%; margin-left: 37px;" plain :disabled="disabled=!show">
                    <span v-show="show">获取验证码</span>
                    <span v-show="!show" class="count">{{count}} s</span>
                </el-button>
            </el-form-item>
            <el-form-item prop="agree">
                 <!-- 同意选项 -->
                 <el-checkbox v-model="loginForm.agree">我同意并接受<span style="color:red">《协议》</span></el-checkbox>
             </el-form-item>
                <!-- 注册按钮 -->
                <div class="register-button">
                    <el-button @click="submitForm('loginForm')"  type="primary">立即注册</el-button>
                </div>
        </el-form>
      </el-card>
  </div>
</template>

<script type="text/javascript">
// axios获取后台数据
import { Register } from '@/api/user'
export default {
  name: 'registerPage',
  data () {
    /* 自定义表单验证 */
    /* 中名验证 */
    const chName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'))
      } else {
        const reg = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/
        if (value.length < 100 && reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的用户名'))
        }
      }
    }
    // 设置密码的验证规则
    const checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.loginForm.checkPass !== '') {
          this.$refs.loginForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 设置确认密码的验证规则
    const checkPassAgain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    /* 手机号 */
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入联系方式'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的电话'))
        }
      }
    }
    const validator = function (rule, value, callBack) {
      value ? callBack() : callBack(new Error('请勾选协议'))
    }
    return {
      /* 注册数据 */
      loginForm: {
        username: 'root', /* 用户名 */
        password: '123456', /* 密码 */
        checkPass: '123456', /* 确认密码 */
        phone: '18238300601', /* 手机号 */
        verifyCode: '', /* 验证码 */
        agree: false /* 是否同意协议 */
      },
      /* 获取验证码倒计时 */
      show: true, // 初始启用按钮
      count: '', // 初始化次数
      // 使用验证规则
      rules: {
        /* 用户名 */
        username: [
          { required: true, validator: chName, trigger: 'blur' }
        ],
        // 密码
        password: [
          { required: true, validator: checkPass, trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        // 校验密码
        checkPass: [
          { required: true, validator: checkPassAgain, trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        /* 手机号 */
        phone: [
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        /* 验证码 */
        verifyCode: [
          { required: true, message: '请输入您的验证码' },
          { pattern: /^\d{6}$/, message: '验证码为6位数字' }
        ],
        agree: [{ validator }]
      }
    }
  },
  methods: {
    /* 注册时验证 */
    submitForm (formName) {
      /* 进行验证 */
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 只有一切的校验通过之后 才会进行请求
          try {
            // 将登陆的数据和后台数据进行验证
            const res = await Register(this.loginForm)
            console.log(res)
          } catch (err) {
            console.log(err, '获取失败')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /* 获取验证码倒计时 */
    send () {
      /* 判断手机号是否输入 */
      if (this.loginForm.phone !== '') {
        /* 判断验证码是否输入正确 */
        if (/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.loginForm.phone)) {
          const TIME_COUNT = 60 /* 设置倒计时时间 */
          if (!this.timer) {
            this.count = TIME_COUNT
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.show = true
                clearInterval(this.timer) // 清除定时器
                this.timer = null
              }
            }, 1000)
          }
          /* 一切都正确在获取验证码 */
          this.$axios({
            url: '/ali/registerSmsCode/18238300601',
            method: 'get'
          }).then(res => {
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message({
            message: '手机号格式不对',
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '请先填写手机号',
          type: 'warning'
        })
      }
    }
  }
}
</script>