乐趣区

关于前端:Form-表单校验的使用

jiezi

指标

把握 element-ui 中表单校验的应用

根本步骤 - 共三步

  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: 'blur'}

实操代码

data () {
    return {
      // 表单验证规定，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规定
      
      rules: {
        // 字段名：mobile 就示意要验证的 属性
        // 值: 是一个数组。数组中的每一项示意一条规定。mobile: [{ required: true, message: '请输出手机号', trigger: 'blur'}
        ]
      }
    }
  },

留神：

  • rules 中的属性名与表单数据项中的属性名必须是统一的。

步骤 2 - 模板中的配置

内容：

  1. 给 el-form 组件绑定 model 为表单数据对象
  2. 给 el-form 组件绑定 rules 属性配置验证规定
  3. 给须要验证的表单项 el-form-item 绑定 prop 属性，留神：prop 属性须要指定表单对象中的数据名称

代码：

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="明码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit"> 立刻创立 </el-button>
    <el-button @click="onCancel"> 勾销 </el-button>
  </el-form-item>
</el-form>

验收成果

咱们做到这一步时，当用户输出的内容不合乎表单规定要求时，并且某个输入框失焦时，它会给出相应的提醒，当咱们输出的内容符合要求时，谬误提醒会主动隐没。

步骤 3 - 手动兜底验证

格局

element-ui 的表单组件.validate(valid => {if(valid) {// 通过了验证} else {// 验证失败}
})

阐明：

  • validate 办法是表单组件自带的，用来对表单内容进行测验。
  • 须要在模板中增加对表单组件的援用：ref 的作用次要用来获取表单组件手动触发验证

代码 - 模板

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

增加 ref 来援用 el-form 组件。

代码

在做提交时进行手动兜底验证，如果通过了验证

doLogin () {alert('我能够做登录了')
},
submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的后果，如果是 true，示意通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你能够做后续动作了
      this.doLogin()}
  })
}

总结:

步骤

  1. 定义验证规定(按 element-ui 的要求来)

  2. 配置模板，利用规定

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

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

    给表单中的元素（Form-Item）设置 prop 属性，其值为设置为需校验的字段名

  3. 手动兜底验证

自定义测验规定的应用格局

场景：

明码不容许是123456

指标

把握自定义测验规定的应用格局

思路

在 rules 中自定义 validator

格局

rules:{
    属性名 1: [
      { 
        // 留神参数程序
        validator: function (rule, value, callback) {
              // rule：采纳的规定
          // value: 被校验的值
          // callback 是回调函数，//      如果通过了规定测验，就间接调用 callback()
          //      如果没有通过规定测验，就调用 callback(谬误对象，在谬误对象中阐明起因)
            //         例如：callback(new Error('谬误阐明'))
          }, 
        trigger: 'blur' 
     }]
}

落地代码

rules: {name: [{required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {validator:(rule, value, callback)=>{console.log(rule, value, callback)
          if(value === '123456') {callback(new Error('这是世界上最差的明码了'))
          } else {callback()
          }
          },
        triggle: 'blur'
      },
      {min: 6, max:8, message:'长度为 6 - 8 位', triggle: 'blur'},
      {required: true, message:'必须要填入', triggle: 'blur'},
  ]
}
退出移动版