element-ui的表单正则校验

🤯🤯💦💦💦竹怜新雨后,山爱夕阳时, 绵绵细雨, 也许会让嘈杂的窗外焕然一新吧!

基本步骤-共三步

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

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

给表单设置 rules 属性传入验证规则
给表单设置model属性传入表单数据
给表单项(Form-Item )设置 prop 属性,其值为设置为需校验的字段名

  1. 手动兜底验证

详细说明:

步骤1-定义表单验证规则,固定格式

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

练习demo的正则:


  { required: true, message: '请输入验证码', trigger: 'blur' },
  //trigger: 'blur'表示失去焦点时,开始正则校验
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', 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固定格式:

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

说明:

● validate 方法是表单组件自带的,用来对表单内容进行检验。

● 需要在模板中添加对表单组件的引用:ref 的作用主要用来获取表单组件手动触发验证

示例代码

<template>
  <div style="width:800px">
    <h1>表单</h1>
    <el-form
    ref="form"
    :rules="rules"
    :model="form"
    label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        // 定义规则
        rules: {
          "username": [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          "password":[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
            { 
              validator(_, value, callback){
                // rule:采用的规则
                // value: 被校验的值
                // callback是回调函数, 
                //      如果通过了规则检验,就直接调用callback()
                //      如果没有通过规则检验,就调用callback(错误对象,在错误对象中说明原因)
                //         例如:callback(new Error('错误说明'))
                if(value === '123456'){
                  callback(new Error('密码不能为123456'))
                } else{
                  callback()
                }
                // console.log(rule, value, callback)
              }, 
              trigger:"blur"
            }
          ]
        }
      }
    },
    methods: {
      onSubmit() {
        // 手动兜底校验
        console.log(this.$refs.form)
        // this.$refs.form.validate会让表单自动校验一次
        // valid就会自动接收校验的结果
        this.$refs.form.validate(valid => {
          console.log(valid)
          // valid: true,false
          // 为false: 表单上会有提示信息
          // 如果是true,就可以进一步发ajax做登录
        })
      }
    }
  }
</script>
效果图如下

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值