位置: 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)

  • 建筑业增值税税率2022
  • 进口化妆品需要备案吗
  • 股权转让给个人和公司的区别
  • 个人出租住房要交个税吗
  • 企业所得税包含哪些税种
  • 免征增值税项目记忆
  • 小微企业附加税税收优惠政策
  • 小企业以前年度损益调整科目取消了吗
  • 建筑企业增值税纳税义务发生时间如何确定
  • 个人转让著作权所得免征个人所得税吗
  • 公司换法人公司账户怎么办
  • 买车交税怎么算价格
  • 健身行业的税务政策
  • 外购存货成本包括哪些
  • 房产租赁中的免租期间需要交房产税吗
  • 营改增后不动产进项税额抵扣
  • 收购报废车有利润吗
  • 社保费现金收缴管理制度
  • coloros12对比鸿蒙
  • pc端微信怎么更新
  • 递延收益的会计科目
  • 咨询服务费怎么交税
  • 该内存不能为read怎么解决?win+r弹不出来也不好使
  • 不动产固定资产标识牌
  • 延期收款利息如何缴税
  • 如何计提加计抵减额分录
  • 吉野是哪里
  • php超时限制
  • 存货跌价准备的转销会计分录
  • 收到某单位投入一批原材料
  • nodejs如何使用
  • Apsara Clouder云计算技能认证
  • 视同销售的情况有哪些?
  • 建筑安装包清工税率多少
  • 冲暂估会计分录
  • 增值税普通发票查询真伪
  • 一般纳税人是否享受减免政策
  • python输入函数帮助
  • mysql基本语法
  • 在ubuntu中安装win10
  • 营业执照需要提交什么材料
  • 资产负债表中应收账款的计算公式
  • 支付招标代理费的请示
  • 无票收入增值税怎么申报
  • 公司垫付生育津贴后,社保局未报销给公司
  • 企业所得税中资产计税基础怎么填
  • 盘盈盘亏怎么看
  • 出纳属于会计岗位职责吗
  • 新政府会计制度与旧制度区别
  • 购买花卉
  • 因管理不善材料被盗应记啥科目
  • 结转已到期未兑现的商业承兑汇票会计分录
  • 支出费用的区别
  • 暂估入库估多了怎么办
  • 以现金支付现金股票增值权属于经营活动吗
  • 纳税申报怎么查
  • VMWare linux mysql 5.7.13安装配置教程
  • win8.1配置要求
  • win10右键菜单自定义
  • mac uuid查询
  • centos如何清除硬盘数据
  • Win7系统设置屏保密码
  • win7电脑连不上wifi怎么解决
  • ptssvc.exe - ptssvc是什么进程 有什么用
  • Linux Bash Shell入门教程
  • win70
  • win10 mobile 1709
  • qt rgb颜色
  • nodejs的socket
  • Android Chronometer(定时器)
  • ghost详细说明
  • bootstrap怎么学
  • js操作dom节点的方法
  • ajax简单实例
  • node的使用
  • jquery日期插件
  • 时间戳的差值
  • Android开发工具箱
  • 尾矿治理文件
  • 公司税务怎么查询缴款信息呢
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设