rules规则(包含回调函数规则)配置

最新推荐文章于 2024-08-02 17:08:39 发布
最新推荐文章于 2024-08-02 17:08:39 发布
阅读量2.4k 收藏 5
点赞数 1
分类专栏： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Winsom1/article/details/107335162
版权
vue 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
js
23 篇文章 0 订阅
订阅专栏

这里总结了几个常用的规则，方便下次使用
必填，必选，邮箱，手机号，时间，数字，数组，字符长度，
以邮箱为例子与手机号为例

//这是一个邮箱的验证规则
rules: {
    email: [{
            required: true,//是否必填
            message: '请输入邮箱地址',//错误提示信息
            trigger: 'blur'//检验方式（blur为鼠标点击其他地方，）
        },
        {
            type: 'email',//要检验的类型（number，email，date等）
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']（change为检验的字符变化的时候）
        }
    ]，
  phone: [{
        required: true,
        pattern: /^1[34578]\d{9}$/,//可以写正则表达式呦呦呦
        message: '目前只支持中国大陆的手机号码',
        trigger: 'blur'
    }],
}

在这里插入图片描述
HTML文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>

    <body>
        <div id="app">
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="客户邮箱" prop="email">
                            <el-input v-model="ruleForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="客户年龄" prop="age" prop='age'>
                            <el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间" required>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date2">
                                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="活动性质" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                <el-checkbox label="地推活动" name="type"></el-checkbox>
                                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="线上品牌商赞助"></el-radio>
                                <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data() {
                    return {
                        age: '',
                        ruleForm: {
                            name: '',
                            region: '',
                            date1: '',
                            date2: '',
                            delivery: false,
                            type: [],
                            resource: '',
                            desc: '',
                            email: '',
                            age: '',
                        },
                        rules: {
                            age: [{
                                    required: true,
                                    message: '年龄不能为空'
                                },
                                {
                                    type: 'number',
                                    message: '年龄必须为数字值'
                                },
                                
                            ],
                            email: [{
                                    required: true,
                                    message: '请输入邮箱地址',
                                    trigger: 'blur'
                                },
                                {
                                    type: 'email',
                                    message: '请输入正确的邮箱地址',
                                    trigger: ['blur', 'change']
                                }
                            ],
                            name: [{
                                required: true,
                                message: '请输入活动名称',
                                trigger: 'blur'
                            }],
                            region: [{
                                required: true,
                                message: '请选择活动区域',
                                trigger: 'change'
                            }],
                            date1: [{
                                type: 'date',
                                required: true,
                                message: '请选择日期',
                                trigger: 'change'
                            }],
                            date2: [{
                                type: 'date',
                                required: true,
                                message: '请选择时间',
                                trigger: 'change'
                            }],
                            type: [{
                                type: 'array',
                                required: true,
                                message: '请至少选择一个活动性质',
                                trigger: 'change'
                            }],
                            resource: [{
                                required: true,
                                message: '请选择活动资源',
                                trigger: 'change'
                            }],
                        }
                    };
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if(valid) {
                                alert('submit!');
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    }
                }
            });
        </script>
    </body>

</html>

回调函数：
HTML:

<el-form :model="SMSForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm form">
      <el-form-item label="短信平台模板号" prop="templateNumber">
        <el-input v-model="SMSForm.templateNumber"  placeholder="不区分大小写,最多50字" max="50" style="margin-left:10px"></el-input>
      </el-form-item>
</el-form>      

return {
        SMSForm: {
          templateNumber:'',
          templateName: '',
          applySys: 1,
          messageRuleId: null,
          ruleList: []
        },
        isEdit: false,
        rules: {
          templateNumber:[
            { required: true, message: '请输入模板号', trigger: 'blur' },
            { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
            { validator: checkTempNumber, trigger: 'blur' }
          ],
          	}
          }
//回调函数
 data () {
      let checkTempNumber = (rule, value, callback) => {
        let number = value.match(/[^\w_]/g,'');
        if(!number){
          callback()
          return false
        }else{
          callback(new Error('仅限英文和数字'))
        }
      }
    }
Winson℡
关注
专栏目录
沙发规则API
02-19
`SofaRules`可能有`on('ruleApplied', callback)`这样的事件绑定，当规则应用后触发回调函数。 4. **错误处理**：良好的API设计会考虑到错误处理。`try...catch`结构可以用来捕获和处理可能出现的错误，同时API可能...
rules的校验规则集合
记录或发现工作问题，予以解决
06-14 3927
rules的校验规则集合
rules表单校验常用属性
weixin_55333190的博客
09-04 1629
表单校验规则 第三方校验规则参见 async-validator 点击跳转 几个基本使用的规则 规则 说明 required 如果为true，表示该字段为必填 message 当不满足设置的规则时的提示信息 pattern 正则表达式，通过正则验证值 min 当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值 max 当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值 trigger 校验的触发方式，change
rule_解析`````````````````
最新发布
qq_34171593的博客
08-02 971
（注意，尽管“cde”包含“c”，但它不会被第三条规则出发，因为它是第一条规则产生的新字符串，而不是来自原始字符串）执行第一条规则之前的输入字符串，new_str表示执行第一条规则之后的输出字符串，change_index"表示。字段说明：键1表示第一条规则，键1对应的值表示第一条规则运行后的状态，source_str表示。3.第三条规则：b + cde + b + d + a + d + a #c a。3.第三条规则：b + cde + b + d + a + d + a #c a。
el-from表单校验自定义函数
weixin_53504747的博客
12-16 863
前言 因为需求，一个表格需要动态校验数据，当然可用表单自带的动态校验方法，但是我这个表格由于数据量庞大，甚至达到了1000多行，如果全部展示在页面上，直接导致页面卡死或者输入内容慢的一批。所以我使用了虚拟滚动，这样数据不会卡，但是表单自带的校验规则肯定不行了，所以需要自己写一个校验规则。嘿嘿（这里推荐vxe-table的虚拟滚动） 一、自定义函数创建一个rules.js是什么？ import { MessageBox, Message, Loading, Notification } fr...
表单 自定义校验 函数
pengboran的博客
10-27 483
对于复杂表单类型，如表单对象嵌套一个对象 1.创建 rules.js 文件 let common = { checkRules(params, rules) { //表单校验 for (let key in rules) { let arr = rules[key] for (let i = 0; i < arr.length; i++) { let rule = arr[i], val = params[key] === 0 ? '0' : params[key]
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
god_sword_的博客
03-01 4571
Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误
jQuery validate 自定义样式、规则
06-01
可以将其设置为一个回调函数，以决定错误消息插入到HTML中的位置。 4. **隐藏验证提示**：使用`showErrors`方法可以定制如何显示错误。你可以选择在所有字段都验证失败时才显示错误，或者逐个显示。 ### 自定义...
jquery validate 自动绑定校验规则
04-19
4. **事件与回调函数** `jQuery Validate` 提供了多个事件，如`invalid.form`（表单验证失败时触发）、`submitHandler`（当表单提交且所有验证通过时触发）。这些事件可以用来处理更复杂的业务逻辑。 5. **源码...
react-TSLint规则用于检测ReactHooks的无效使用
08-14
此规则确保类方法在使用时不会被错误地绑定，特别是在使用`useCallback`时，确保回调函数内部的方法始终指向正确的实例。 6. **`@typescript-eslint/explicit-module-boundary-types`**: 这个规则鼓励在模块边界...
ProGuard rules for RxJava（我用自己的信誉担保，非常完美）.zip
09-24
反应式编程是一种编程范式，强调数据流和依赖传播，而不是手动管理回调函数。在大型项目中，尤其是在Android环境中，RxJava能够帮助简化复杂的并发和事件处理逻辑。 "ProGuard rules for RxJava（我用自己的信誉...
ElementUI 表单 rules 规则
普罗旺斯
08-23 1万+
function验证器，可以为指定字段自定义验证函数：function(rule, value, callback, source, options)rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称value：当前校验字段的值callback：校验结束的回调函数，不管判定成功或者失败，必须调用。
elementUI自定义表单校验无法进入回调函数
qq_41957192的博客
09-19 371
自定义校验规则中不能直接写return，必须返回一个回调函数callback()，返回callback的入参为空代表校验通过规则，返回含new Error（‘自定义提示’）入参代表校验不通过规则。必须保证自定义校验规则的每个分支都调用了callback方法，否则会导致el-form组件的validate方法无法进入回调函数。
Element表单验证（1）
weixin_30247307的博客
07-13 294
Element表单验证（1） 首先要掌握Element官方那几个表单验证的例子，然后才看下面的教程。 Element主要使用了async-validator这个库作为表单验证 async-validator主要分成三部分 Validate Options Rules 其中，对于我们使用Element的来说，Rules最重要，也是这部分内容较多的。 async-validator各部分 as...
el-form 新增校验后，并重置
qq_40671274的博客
04-10 485
resetFields 重置form表单内容，将所有字段值重置为初始值并移除校验结果。
ElementUI中el-form组件的rules参数详解
changwen17的博客
02-16 7432
ElementUI中el-form组件中rule规则详细介绍
前端Vue中常用rules校验规则
KEEP
03-01 6479
vue的rules中自带的校验规则和常用正则表达式校验 vue的rules中自定义校验规则
el-form自定义规则rules——validate的使用 & 小红心不出现解决方案
weixin_44867717的博客
07-03 1万+
el-form
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验
热门推荐
weixin_42125732的博客
04-04 1万+
前端轮子
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值