Element ui: form表单使用

初次使用Element ui,遇到不少坑。在此做些记录,方便日后查阅。

form 表单赋值/取值

取值:获取 form 表单的每个表单项的值:this.formName.property,比如:this.ruleForm.usernamethis.ruleForm.psw
赋值:大部分都是下面这种方式赋值格式(property: value),
一般的 input ,赋值和显示的事一致的,而有些则不一定。比如下拉选择列表 select ,复选框 checkbox , 单选 radio ,日期 date 时间 time , 文件上传 fileupload 等等会有个显示文本(给用户看)和实际值(后台数据库存储的值)。

form 表单验证

自带验证和自定义验证。
自带验证:

<script>
  export default {
    data() {
      return {
        form: {
          telphone: '',
          cardnum: '523456178988776111',
        },
        rules: {
          telphone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          cardnum: [
            { required: true, message: '请输入买受人身份证号', trigger: 'blur' }
          ],
        }
      }
    },
    ...
  }
</script>

自定义验证:

<script>
  export default {
    data() {
      //自定义验证规则
      //身份证验证
      var checkCardnum = (rule, value, callback) => {
        setTimeout(() => {
          var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
          if(!reg.test(value)){
            callback(new Error('身份证输入不合法'));
          }else{
            callback();
          }
        }, 1000);
      };
      return {
        form: {
          telphone: '',
          cardnum: '523456178988776111',
        },
        rules: {
          telphone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
          ],
          cardnum: [
            { required: true, message: '请输入买受人身份证号', trigger: 'blur' },
            { validator: checkCardnum, trigger: 'blur' }
          ],
        }
      }
    },
    ...
  }
</script>

当然,自定义验证规则时,一般都会是单独的文件做相关验证规则限制,然后引入调用。validate.js,customValidate.js, xxx.vue。
validate.js

/**
 * Created by feili on 2018/5/11.
 */
export default function (type,val) {
  //type的值:qq-QQ号,mobile-手机号,phone-座机号,cardid-身份证号,integer-数字,moneynum-货币数字(带两位小数),...
  var result = false;

  //QQ
  var isQQ = function (val) {
    const reg = /^[1-9][0-9]{4,10}$/;
    return reg.test(val);
  }

  //邮箱
  var isEmail = function (val) {
    const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    return reg.test(val);
  }

  //手机号(目前只支持中国大陆的手机号码)
  var isMobile = function (val) {
    const reg = /^1[34578]\d{9}$/;
    return reg.test(val);
  }

  //座机号
  var isPhone = function (val) {
    const reg = /^0\d{2,3}-\d{7,8}$/;
    return reg.test(val);
  }

  //身份证号(15位和18位)
  var isCardID = function (val) {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return reg.test(val);
  }

  //车牌号(川B12345)
  var isPlateNumber = function (val) {
    const reg = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/;
    return reg.test(val);
  }

  //数字(正整数和0)
  var isInteger = function (val) {
    const reg = /^([1-9]\d*|[0]{1,1})$/;
    return reg.test(val);
  }

  //货币数字(最多带两位小数)
  var isMoneynum = function (val) {
    const reg = /^([1-9]\d+|0)(\.[\d]{1,2})?$/;
    return reg.test(val);
  }


  switch(type) {
    case 'qq':
      result = isQQ(val);
      break;
    case 'mobile':
      result = isMobile(val);
      break;
    case 'phone':
      result = isPhone(val);
      break;
    case 'cardid':
      result = isCardID(val);
      break;
    case 'platenumber':
      result = isPlateNumber(val);
      break;
    case 'integer':
      result = isInteger(val);
      break;
    case 'moneynum':
      result = isMoneynum(val);
      break;
    default:
      break;
  }

  return result;

}

customValidate.js

/**
 * Created by feili on 2018/5/11.
 */

import  validate from './validate.js'

export default {
  /*qq号*/
  isQQ: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('qq',value)) {
        callback(new Error('您输入的QQ号不正确!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*手机号*/
  isMobile: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('mobile',value)) {
        callback(new Error('您输入的手机号不正确!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*座机号*/
  isPhone:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('phone',value)) {
        callback(new Error('您输入的座机号不正确!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*身份证号*/
  isCardID:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('cardid',value)) {
        callback(new Error('您输入的身份证号不正确!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*数字(正整数和0)*/
  isInteger: (rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('integer',value)) {
        callback(new Error('请输入数字!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },
  /*保留两位小数*/
  isMoneynum:(rule, value, callback) => {
    if((value || '')!='') {
      if(!validate('moneynum',value)) {
        callback(new Error('请输入正确的数字,最多保留两位小数!'))
      } else {
        callback()
      }
    } else{
      callback();
    }
  },

}

xxx.vue
import customValid from '@/util/customValidate'

rules: {
          renttype: [
            { required: true, message: '请选择出租方式', trigger: 'change' }
          ],
          rentarea: [
            { required: true, message: '此项必填', trigger: 'blur' },
            { validator: customValid.isMoneynum, trigger: 'blur' }
          ],
          rentcash: [
            { required: true, message: '此项必填', trigger: 'blur' },
            { validator: customValid.isInteger, trigger: 'blur' }
          ],
          ...
}

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容