element-ui中手机号/中文姓名/英文姓名/密码/邮箱/日期 等简单的验证规则(vue)

40 篇文章 0 订阅
29 篇文章 0 订阅

验证手机号/中文姓名/英文姓名/密码/邮箱等:

data : {     
    // 设置身份证号的验证规则
    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.addForm.checkPass !== '') {
          this.$refs.addForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 设置确认密码的验证规则
    const checkPassAgain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.addForm.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('请输入正确的中文名'))
        }
      }
    }
    return {
      // 新增数据规则
      addRules: {
        // 身份证
        credentialNo: [
          { required: true, validator: idCard, 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' }
        ],
        chnName : [
          { required: true, validator: chnName, trigger: 'blur' }
        ],
        enName: [
          { required: true, validator: enName, trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: checkPhone, trigger: 'blur' }
        ]
      },
        // 验证邮箱
      const validateEmail = (rule, value, callback) => {
          if (/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value) || !value) {
            callback()
          } else {
            callback(new Error('请输入正确邮箱'))
          }
       }

    }
}

对出生日期进行限制(只能选择当天以前的日期)

获取今天日期

let nowDay = new Date().toLocaleDateString().split('/').join('-')​​​​​​​
// 将1970/08/08转化成1970-08-08
template中:
<el-date-picker v-model="addForm.birthDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerBeginDateBefore" style="width: 100%"></el-date-picker>

data中:
data(){
    return {
      // 出生日期限制
      pickerBeginDateBefore: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7 
           //(带 - 8.64e7时,今天之前的日期,不包括今天)
          // return time.getTime() > Date.now() - 8.64e7 (今天之后的日期,包括今天)
        }
      }
    }
}

 

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值