ElementUI-Form表单组件-表单验证

基本步骤-共三步

  1. 定义验证规则。data()中按格式定义规则

  2. 在模板上做属性配置来应用规则(三个配置)

    给表单设置 rules 属性传入验证规则

    给表单设置model属性传入表单数据

    给表单项(Form-Item )设置 prop 属性,其值为设置为需校验的字段名

  3. 手动兜底验证

 

步骤1-定义表单验证规则

在 data 中,补充定义规则。

格式:

data() {
  return {
    rules: {
        // 字段名1:表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组,数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

 示例


  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值