位置: IT常识 - 正文

vue表单验证rules以及validator验证器的使用(vue表单验证数字)

编辑:rootadmin
vue表单验证rules以及validator验证器的使用

推荐整理分享vue表单验证rules以及validator验证器的使用(vue表单验证数字),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue表单验证插件,vue表单验证代码,vue表单验证代码,vue表单验证数字,vue表单验证插件,vue表单验证不起作用,vue表单验证规则,vue表单验证不起作用,内容如对您有帮助,希望把文章链接给更多的朋友!

为防止用户犯错,尽可能更早地发现并纠正错误。

Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

注意:prop对应表单域 model 字段,使用 validate方法时,该属性是必填的。

表单验证rules

以官网给出的例子分析来看

将prop 属性设置为需校验的字段名。

 在data里配置要校验字段和校验规则:

required:true表示为必须输入;

message:""设置不符合校验规则时的提示信息;

trigger:""设置校验的触发方式:

        ‘change’:数据改变时触发;

        ‘blur’:失去焦点时触发;

vue表单验证rules以及validator验证器的使用(vue表单验证数字)

        没有进行任何输入时,不会触发change,但一定会触发blur事件。

设置校验规则后,表头会出现红色*样式

该示例完整代码:

<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="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 placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </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 label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </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><script> export default { data() { return { ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', 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' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }; }, 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>自定义校验规则

除此之外,我们还可以使用validator验证器来自定义校验规则,

举一个使用自定义验证规则来完成密码的二次验证的例子。

还是和之前一样,设置prop需校验的字段名和v-model绑定值

 但这时,我们需要在data中自己定义校验规则,需要注意的是,设置的规则与return同级。

 在rules中配置要校验的字段和用到的规则

 

完整代码如下:

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </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><script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: { pass: '', checkPass: '', age: '' }, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, 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>
本文链接地址:https://www.jiuchutong.com/zhishi/288942.html 转载请保留说明!

上一篇:伦索伊斯马拉年塞斯国家公园,巴西巴雷里尼亚斯市 (© WIN-Initiative/Getty Images)(伦索伊斯马拉赫塞斯国家公园)

下一篇:pytorch对已有模型的更改(常用的操作)(pytorch model.module)

  • 小米wifi怎么连接路由器(小米wi-fi怎么连)

    小米wifi怎么连接路由器(小米wi-fi怎么连)

  • iphonex间歇性无信号(iphonexs间歇性无信号)

    iphonex间歇性无信号(iphonexs间歇性无信号)

  • 小米手表有什么功能(小米手表有什么功能怎么用)

    小米手表有什么功能(小米手表有什么功能怎么用)

  • 云服务手机查找对方知道吗(云服务中的查找手机)

    云服务手机查找对方知道吗(云服务中的查找手机)

  • 华为手环4pro充电没反应(华为手环4PRO充电座和B19一样吗)

    华为手环4pro充电没反应(华为手环4PRO充电座和B19一样吗)

  • 苹果6视频没有声音怎么回事(苹果6视频没有美颜功能)

    苹果6视频没有声音怎么回事(苹果6视频没有美颜功能)

  • 华为nova7手机耳机孔在哪里(华为nova7手机耳机插哪)

    华为nova7手机耳机孔在哪里(华为nova7手机耳机插哪)

  • 京东账号被别人实名怎么办(京东账号被别人绑定了怎么办)

    京东账号被别人实名怎么办(京东账号被别人绑定了怎么办)

  • 算法指的是(算法指的是对特定问题求解步骤的一种描述,是指令的)

    算法指的是(算法指的是对特定问题求解步骤的一种描述,是指令的)

  • 新买的苹果手机有贴膜吗(新买的苹果手机怎么充电对电池好)

    新买的苹果手机有贴膜吗(新买的苹果手机怎么充电对电池好)

  • 探探是不是一定要充钱才能聊天(探探是不是一定要加微信)

    探探是不是一定要充钱才能聊天(探探是不是一定要加微信)

  • docx文档中怎么画横线(docx文档中怎么删除空白页)

    docx文档中怎么画横线(docx文档中怎么删除空白页)

  • ipad怎么增加内存容量(苹果ipad怎么增加内存)

    ipad怎么增加内存容量(苹果ipad怎么增加内存)

  • 怎么用手机量尺寸(怎么用手机量尺寸标准)

    怎么用手机量尺寸(怎么用手机量尺寸标准)

  • 如果手机欠费了不交会怎样(如果手机欠费了,一直不交会怎么办)

    如果手机欠费了不交会怎样(如果手机欠费了,一直不交会怎么办)

  • 微信关闭自启动省电吗(微信关闭自启动能收到消息吗)

    微信关闭自启动省电吗(微信关闭自启动能收到消息吗)

  • 华为mate20pro参数(华为mate20Pro参数)

    华为mate20pro参数(华为mate20Pro参数)

  • ios13怎么查找别的id(苹果ios13怎么查找别人的iphone位置)

    ios13怎么查找别的id(苹果ios13怎么查找别人的iphone位置)

  • 闲聊没有提示消息声音(闲聊是不是关闭了)

    闲聊没有提示消息声音(闲聊是不是关闭了)

  • xr充不进去电怎么办(xr充电充不进)

    xr充不进去电怎么办(xr充电充不进)

  • 荣耀v20呼吸灯怎么设置(荣耀x20手机呼吸灯)

    荣耀v20呼吸灯怎么设置(荣耀x20手机呼吸灯)

  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍

    QQPCTray.exe是什么进程 QQPCTray.exe文件介绍

  • 新手为什么选择织梦CMS(dedecms)程序建设网站?(新手为什么要买二手车)

    新手为什么选择织梦CMS(dedecms)程序建设网站?(新手为什么要买二手车)

  • 增值税为什么不重复征税
  • 什么是资本利得?
  • 收到银行承兑汇票怎么接收
  • 其他应收款如何清理
  • 广告发布费属于什么征税项目
  • 银行开户登记号在哪看
  • 一揽子交易定义
  • 支付费用可以通过应收账款
  • 购销合同印花税最新政策2023
  • 返利平台可信吗
  • 现金折扣销售退回的会计分录
  • 固定资产作为实收资本报废怎么处理
  • 然后销售产品
  • 固定资产原值增加后如何计提折旧
  • 一般纳税人注销公司麻烦吗
  • 企业员工奖励款怎么做账
  • 文化事业建设税计算方法
  • 应付工会经费 实际支付
  • 未分配利润期末余额怎么算出来
  • 房地产企业人防设备计入什么科目
  • 付款信息和开票信息区别
  • 2020年餐饮行业免税政策
  • 企业无法取得发票,如何税前扣除
  • 专用发票红字发票
  • linux系统已经得到了广泛的应用
  • 房产税的会计科目怎么做
  • msworks.exe - msworks是什么进程 有什么用
  • 酒店加盟管理费多少
  • 公司要交什么税个人卖给公司的二手车
  • php中imagestring
  • 火星车百家号
  • 固定资产折旧加计扣除
  • vue控制按钮是否禁用
  • vuecli非根目录打包
  • 财税2016年12号文件解读
  • 4、nerf(pytorch)
  • 企业怎么可以合理避税?
  • 帝国cms建站实例教程
  • 固定资产清理怎么入账
  • 可供分配利润的会计分录
  • 税控系统减免税
  • 呆账核销账务处理程序
  • 一整天的时间从几点到几点
  • mysql基础知识点
  • 外币账户的设置在哪里
  • 农民专业合作社法
  • 吸收合并需要编制
  • 捐赠支出税前扣除标准
  • 受托代销商品款是什么意思
  • 公司员工入职的心得体会
  • 冲个人借款分录怎么写
  • 债权投资有哪些科目
  • 加计抵减期末有余额怎么办
  • 电汇凭证是什么会计科目
  • 物业管理公司如何应用节能新技术
  • 分析企业盈余状况
  • mysql 非聚集索引
  • window系统怎么截屏屏幕
  • Win10 Mobile 10536预览版用得越久越卡顿是怎么回事?
  • find linux命令详解
  • pcalc是什么软件
  • 微软2021年新系统
  • win7屏幕不停闪烁
  • win10开机图标就变乱
  • 极简主义分析
  • 环境篇作文
  • perl读取文件内容逐行处理
  • shell脚本用法
  • 提高网页的效率的方法有
  • 用python编写程序
  • nodejs cicd
  • 网站检测系统
  • 分享js粘帖屏幕怎么弄
  • node.js常用命令
  • linux写时复制
  • python 连接符
  • javascript面向对象精要pdf
  • 江苏省生育登记服务网
  • 陕西省电力app
  • 提租补贴什么标准发放
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设