vue2.0elementUI

vue+elementUI 正则

2019-04-12  本文已影响7人  zlf_j
data () {
  let assetName = (rule, value, callback) => {
        if (!this.checkSpecialKey(value)) {
          callback(new Error('不可有特殊符号'))
        } else {
          callback()
        }
  };
  let assetByname_name = (rule, value, callback) => {
        let reg = /[\u4E00-\u9FA5\s]/
        if (reg.test(value)) {
          callback(new Error('不可出现汉字、空格'))
        } else {
          callback()
        }
   };
   let assetByname_length = (rule, value, callback) => {
        if (value.length > 15) {
          callback(new Error('不得超过15个字符'))
        } else {
          callback()
        }
  };
  return {
     rules: {
       asset_name: [
            { required: true, message: '请输入名称' }, // 必填项校验
            { validator: assetName, message: '不可有特殊符号' }, // 输入时,校验
            { validator: assetName, trigger: 'blur' }, // 失去焦点时,校验
            { validator: assetByname_name, message: '不可出现汉字、空格' },
            { validator: assetByname_length, message: '不得超过15个字符' },
            {min: 3, max: 5, message: '长度为3-5个字符'},
            {pattern: /^[0-9]+$/, message: '必须为数字'},
            {pattern: /^[a-zA-Z]+$/, message: '必须为字母'},
            {pattern: /^[\u4E00-\u9FA5]+$/, message: '必须为中文'},
            {pattern: /^[a-zA-Z0-9]+$/, message: '必须为字母与数字'},
            {pattern: /^[^0-9]/, message: '首字符不可为数字' }
       ] 
  }
  }
}
data() {
      let checkContactWay = (rule, value, callback) => {
        // if (!value) {
        //   return callback(new Error('手机号码不能为空'))
        // }
        let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
        setTimeout(() => {
          if (!myreg.test(value)) {
            callback(new Error('请输入有效的手机号码'))
          } else {
            callback()
          }
        }, 200)
      }
      let checkEmail = (rule, value, callback) => {
        // if (!value) {
        //   return callback(new Error('邮箱不能为空'))
        // }
        let reEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!reEmail.test(value)) {
          callback(new Error('请输入正确的邮箱格式'))
        } else {
          callback()
        }
      }
      let idCard = (rule, value, callback) => {
        if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
            callback(new Error('身份证号码不符合规范'))
        } else {
          callback()
        }
      }
      return {
        form: {
          contact_way: '', // 手机号
          email: '' // 邮箱
          id_number: '' // 身份证号
        },
        rules: {
          contact_way: [
            { validator: checkContactWay, trigger: 'blur' },
            {'required': 'true', 'message': '请输入公司联系方式', 'trigger': 'blur'}
          ],
          email: [
            { validator: checkEmail, trigger: 'blur' },
            {'required': 'true', 'message': '请输入公司邮箱', 'trigger': 'blur'}
          ],
         id_number: [
            {validator: idCard, message: '身份证号码不符合规范'}
         ],
       }
      }
    },

elementUI表单验证,参考:http://element.eleme.io/#/zh-CN/component/form

上一篇 下一篇

猜你喜欢

热点阅读