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

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

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中:

data中:

data(){

    return {

      // 出生日期限制

      pickerBeginDateBefore: {

        disabledDate (time) {

          return time.getTime() > Date.now() - 8.64e7

          //(带 - 8.64e7时,今天之前的日期,不包括今天)

          // return time.getTime() > Date.now() - 8.64e7 (今天之后的日期,包括今天)

        }

      }

    }

}

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