vue element form 自定义校验1(表单校验)

逃离我推掉我的手 2022-10-30 00:33 10阅读 0赞

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验

<template>
      
      
      
      <el-card>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item label="活动名称" prop="name">
            
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <p>{
       {form.name}}</p>
        </el-form>
        <el-button type="primary" @click="commit()">提交</el-button>
    
      </el-card>
    
    </template>
    
    <script> export default { data () { // 校验规则是一个函数变量 var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式 const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if (regEmail.test(value)) return cb() cb(new Error('请输入合法的邮箱')) } return { form: { name: '' }, rules: { name: [ { required: true, message: '不为空', trigger: 'blur' }, { min: 3, max: 10, message: '长度3-10', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }// 使用自定义校验规则 ] }, } }, methods: { commit () { this.$refs.formRef.validate(valid => { if (!valid) return// 如果校验未通过则直接返回 }) } } } </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 Iview 自定义表单校验

1、定义方法method下面 validateAge(rule, value, callback)\{ console.log(1); if (!value) \{

Bertha 。/ 2023年06月12日 08:39/ 0 赞/ 154 阅读

相关 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。 <table> <tbody> <tr> <td> <p>1</p>

向右看齐/ 2022年12月13日 04:48/ 0 赞/ 400 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 380 阅读

相关 Element自定义校验规则

基础布局 <el-form-item label="电话" prop="phone"> <el-input v-model="formData.phone"

悠悠/ 2022年12月05日 00:50/ 0 赞/ 229 阅读

相关 vue element form 自定义校验1(表单校验)

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验 <template> <!--model绑定整个form对象的的

逃离我推掉我的手/ 2022年10月30日 00:33/ 0 赞/ 11 阅读

相关 vue element form 默认校验

<template>   <el-form

骑猪看日落/ 2022年10月30日 00:33/ 0 赞/ 155 阅读

相关 layui自定义表单校验

自定义一个金额的校验 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

雨点打透心脏的1/2处/ 2022年06月03日 01:58/ 0 赞/ 437 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 412 阅读

相关 bootstrap Form表单校验（服务器校验重复）

bootstrapValidator ajax服务器校验重复 1.在validators加上 remote:\{ type : "POST",

布满荆棘的人生/ 2022年04月18日 03:39/ 0 赞/ 301 阅读

相关 Django form 表单校验

Django form 表单类，表单可以提交数据，也可做校验校验的方式：（1）：前端校验：开发难度低，但

灰太狼/ 2022年02月24日 03:14/ 0 赞/ 347 阅读