form表单自定义规则

已于 2022-09-09 09:27:44 修改
阅读量303 收藏
点赞数
文章标签： javascript html
于 2022-09-09 09:27:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61719371/article/details/126776267
版权

1.data函数中定义一个自定义函数：

const start = (rule,value,callback)=>{

// 判断条件

if(value == '' || value == null || value == undefined){

callback(new Error('请选择开始时间’）

}

return callback

}

2.renturn中：

rules: {

start_time: [{required: true, validator: start, trigger: 'change'}]

}

3.表单标签中绑定该字段

思维第一！
关注
AntD中Form表单自定义验证规则
莉兹Liz的博客
02-03 6174
需求 AntD中Form表单自定义验证规则，不能为xxx或者只能是xxx 代码 不能为xxx <Form.Item label="学生编码" name="stuId" validateFirst={true} // 出错时两个校验分别生效 rules={[ { required: true, message: '学生编码不能为空' }, { validator: (rule, value) => { let reg = new RegExp(/[\u4E00-\u9FA5]
vue from表单自定义校验规则的灵活运用
qq_49732089的博客
04-27 706
vue from表单自定义校验规则的灵活运用 虽然elment ui上可以写一些固定的校验规则，我们很方便使用，但是如果遇到页面上是远程搜索类型的input框，如果我们需要做校验的时候调接口，比如输入的内容不能重复之类的，那么这时候我们就需要结合自定义校验规则来使用了，简单写了一下 //引入接口 import {tempaltName} from "@/api/sigUser.js" export default { name: '', components:{}, props:{}, dat
eform自定义表单
01-19
北京方程软件开发的开源工作流，eform自定义表单，大大方便了程序员开发工程中，表单设计的繁琐。
Form表单自定义验证规则
hhhhhhaaaaaha的博客
11-10 1581
工作中遇到的小问题积累
Form自定义校验规则
chen_c_的博客
08-05 468
Form自定义校验规则
form表单的自定义校验规则
weixin_63896561的博客
02-29 739
需求：校验el-input输入为0-100的数字。
el-form 自定义rules 校验规则
fangcaojushi的博客
12-12 1157
包括 https的url地址、小写、大写、大小写英文字母、电子邮件、电话号码、是否合法IP地址、身份证号等的校验例如：再次确认密码的，在data中定义一个const 常量，在rules中引入data(){// 定义规则 (rule, value, callback)callback(new Error('两次输入的密码不一致'))} else {callback()} else {callback(new Error('请再次输入密码'))...rules:{oldPass: [
layui lay-verify form表单自定义验证规则详解
12-13
虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html： <input type="text" lay-verify="digital" placeholder="请输入数字"&gt...
vue表单自定义校验规则介绍
10-18
总结起来，Vue中的表单自定义校验规则提供了一种灵活的方法来验证用户输入，可以根据项目需求编写各种复杂的验证逻辑。通过绑定自定义验证函数到`rules`对象，并在需要的时候触发验证，可以有效地确保表单数据的正确...
Element Plus Form 动态表单自定义校验规则使用教程
悟世君子的博客
01-17 6623
Element Plus Form 动态表单自定义效验规则，官网示例代码中没有，官网示例中的动态表单是固定的规则，本文讲解动态表单自定义规则的使用 动态表单自定义效验规则，是将官网 rules 对象改成数组后，添加自定义规则即可，这种方式同样适用于 View UI Plus
layui中form表单使用自定义函数
wuyoulv的博客
09-09 873
layui中form表单使用自定义函数 遇到的问题： 在使用layui的过程中，想在form表单中的checkbox上面增加点击事件，按照平时使用的规则，在checkbox元素上面增加onclick监听事件，发现无论怎么点击都无法触发这个点击事件。 产生问题的原因： 通过前端审查元素发现原来layui在渲染的时候增加了一个div包裹住了checkbox元素，你的点击事件是在checkbox上面，点击的时候只能点击到这个div而无法触发到checkbox，所以导致无法触发这个点击事件。 解决问题： 这个时候就
vue:el-form rule自定义验证表单
qq_39019765的博客
10-26 1035
rule自定义验证表单 还在纠结表单中input框rule规则太多，提示语不准确或者不全等问题么，直接只用自定义校验。 <template> <el-form :model="form" :rules="rules"> <el-form-item label="名称:" prop="name" > <el-input v-model="form.nam
自定义函数、验证函数使用、表单实现
Feng_Blue_的博客
09-25 202
自定义函数： 详细代码： <script> var a = Number(prompt("请输入一个数字")); function qwq(){ for (var i = 0, l = 0; i<= a; i++){ l = l + i ; } return l;
VUE el-form表单中rules校验方法实现
weixin_44078774的博客
11-24 1762
在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。下面记录了常见的rules实现方式，以做参考。
el-from表单校验自定义函数
weixin_53504747的博客
12-16 860
前言 因为需求，一个表格需要动态校验数据，当然可用表单自带的动态校验方法，但是我这个表格由于数据量庞大，甚至达到了1000多行，如果全部展示在页面上，直接导致页面卡死或者输入内容慢的一批。所以我使用了虚拟滚动，这样数据不会卡，但是表单自带的校验规则肯定不行了，所以需要自己写一个校验规则。嘿嘿（这里推荐vxe-table的虚拟滚动） 一、自定义函数创建一个rules.js是什么？ import { MessageBox, Message, Loading, Notification } fr...
vue如何使用rules对form表单字段进行校验
岁末zzz的博客
07-30 3366
// 更新于 2019-10-15： 在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用 以前验证表单字段的最大长度，description: [{ max: 200, message: ‘最大长度为200个字符’, trigger: ‘blur’ }] 现在写法：description: [validateLen(200)] 其中，validateLen是我封装的一个方法。 使用步骤： 1、在uitls文件夹中新建一个val
Element Ui使用技巧——Form表单的校验规则rules详细说明
热门推荐
zhouxianguang的专栏
09-20 1万+
逍遥云天 Element Ui使用技巧——Form表单的校验规则rules详细说明 Element UI中对Form表单验证的使用介绍： Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见async-validator 文档中提及的用法有2种： 1.对整个表单进行规则验证： <el-form :model="ruleForm" status-icon :rules="r.
Element-UI form表单rules规则校验(常用)
weixin_45586038的博客
05-12 9649
formRules.js文件 1. 必填校验 export const required = { required: true, message: '请填写此项内容', trigger: 'blur' } 2. 手机号校验 export const phone = { pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/, message: '请输入.
vant form表单自定义校验方法
最新发布
09-22
vant框架中的Form组件提供了一套强大的表单验证功能。如果你想自定义校验方法，你可以通过设置`rules`属性来实现。在这个规则对象中，可以包含各种预设的验证规则，比如`required`、`email`等，也可以添加自定义函数。 例如，你可以创建一个名为`customValidate`的函数，它接受当前字段的值作为参数，并根据你的业务逻辑返回一个布尔值来表示是否通过验证： ```javascript import { Form } from 'vant'; function customValidate(value) { // 根据你的需求编写验证逻辑，如检查密码复杂度、邮箱格式等 if (!value || value.length < 6) { return false; } return true; } Vue.use(Vant); new Vue({ el: '#app', data: { rules: { password: [{ type: 'string', required: true, message: '请输入密码', trigger: 'blur' }, customValidate] }, formData: {} }, components: { Form, // ... 其他组件 }, methods: { submitForm() { this.$form.validate((valid) => { if (valid) { console.log('提交成功'); } else { console.log('验证失败'); } }); } } }); ``` 在这个例子中，当用户离开密码输入框时（`trigger: 'blur'`），`customValidate`会被调用。如果验证失败，`message`会显示在错误提示上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值