Element-ui Form表单校验-兜底校验-自定义检验规则

用户登录表单-数据双向绑定

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile">el-input>
      el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.code">el-input>
      el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录el-button>
        <el-button>取消el-button>
      el-form-item>
    el-form>
  div>
template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
script>

<style scoped>
  .form-container{
    width: 600px;
  }
style>

小结

  • 表单中的数据项一般会用一个对象包起来

  • 属性名一般和后端接口中保持一致

  • 在元素上采用v-model双向绑定

Form表单校验-基本介绍

目标

了解表单校验的必要性和实现方式

校验必要性

在向后端发请求调用接口之前,我们需要对所要传递的参数进行验证,来把用户的错误扼杀在摇篮之中。

不能相信用户的任何输入!不能相信用户的任何输入!不能相信用户的任何输入!

校验内容

  • 内容不能为空
  • 密码长度必须多少位
  • 手机号的格式要合规

校验方式

  • 不依赖于任何组件的验证
    • 在做提交之前,自己把数据分析处理一下。
  • 基于具体组件的验证(不同的组件库,它的验证方式可能也各有不同)

小结

  • 表单内容一定要验证(不能相信用户的任何输入!);

  • 如果使用是组件库中的表单,最好是采用它们自带的验证方式

Form表单组件-表单验证

场景

在上面的表单中,要求:用户名必填

目标

掌握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 属性需要指定表单对象中的数据名称

代码:


  
    
  
  
    
  
  
    立即创建
    取消
  

验收效果

我们做到这一步时,当用户输入的内容不符合表单规则要求时,并且某个输入框失焦时,它会给出相应的提示,当我们输入的内容符合要求时,错误提示会自动消失。

步骤3-手动兜底验证

格式

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

说明:

  • validate 方法是表单组件自带的,用来对表单内容进行检验。
  • 需要在模板中添加对表单组件的引用:ref 的作用主要用来获取表单组件手动触发验证

代码-模板


添加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. 手动兜底验证

Form表单组件-表单验证

目标

  1. 手机号不能为空,且必须为11位手机号 (/^1[0-9]{10}$/)

  2. 密码为必填且长度6到8位字符

代码

定义规则

rules:{
          name: [
            // trigger: 什么时候触发验证 
            { required: true, message: '请输入手机号', trigger: 'blur' },
            // pattern : 正则
            { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
          ]
        }

模板中配置应用规则


    
      
    

    
      
    
    
    
      立即创建
      取消
    
  

注意

下面三个地方的属性名必须一致

Element-ui Form表单校验-兜底校验-自定义检验规则_第1张图片

Form表单组件-表单验证-自定义检验规则

场景:

密码不允许是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'},
  ]
}

小结

  • 自定义规则可以让校验逻辑更加灵活,它的格式是固定的
  • callback必须调用

你可能感兴趣的:(vue,vue,elementui)