位置: IT常识 - 正文

Element-UI中的表单验证(element ui table)

编辑:rootadmin
Element-UI中的表单验证

推荐整理分享Element-UI中的表单验证(element ui table),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:element-ui表格,element ui table index,element ui el-table,element ui table formatter,element ui table formatter,element ui table formatter,element ui table,elementui中的表格某一项选中和不选中在哪里判断,内容如对您有帮助,希望把文章链接给更多的朋友!

  Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。   Element为vue-cli 准备了相应的 Element 插件,开发者可以用它们快速地搭建一个基于 Element 的项目,不仅能够快速体验交互细节,还可以使用前端框架封装的代码进行快速开发。   Element-UI作为前端框架,最常使用到的就是表单验证。表单验证是在防止用户犯错的前提下,尽可能让用户更早的发现并纠正错误。在Element-UI中表单验证主要有以下几种方式:

一、全部字段表单验证Element-UI中的表单验证(element ui table)

  适用于表单全部字段校验或需要校验字段类型比较简单的数据类型。   Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。rules根据rules给出的规则会对prop中的值进行校验,当不满足要求时会弹出message相应的提示信息。   示例代码如下:

<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>

  这种方式需要在data()中写入rule{},将prop中需要校验的字段写上验证规则,示例代码如下:

<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>二、单个表单域表单验证

  适用于需要个别检验的字段,或者表单字段有变动的校验。   示例代码如下:

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item></el-form><script> export default { data() { return { dynamicValidateForm: { domains: [{ value: '' }], email: '' } }; }, 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(); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: '', key: Date.now() }); } } }</script>三、自定义校验规则

  适用于Elment-UI中的定义规则不能满足需求,需要自行定义验证规则的情况。 需要在data() {}中添加自定义的校验规则,然后在在data的return中通过validator引用校验规则。data() {return{}}中定义的rules要 中的 :rules 属性值相同,rules中的对象userName要与与 中的prop属性值相同。 示例代码如下:

<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>

  自定义规则有两种书写位置:

在data中写规则,示例代码如下:data() { // 自定义校验规则 var bargainMoney = (rule, value, callback) => { // rule 对应使用bargainMoney自定义验证的 对象 // value 对应使用bargainMoney自定义验证的 数值 // callback 回调函数 const r = /+?[1-9][0-9]*$/; // 正整数 if (value == null || String(value).trim() === "") { callback(new Error("不能为空")); } else if (!r.test(value)) { callback(new Error("请输入正整数")); }else { callback(); } };   return { formData: { haggleNumber: "", // 砍价人数 }, rules: { haggleNumber: [ { required: true, validator: bargainMoney, trigger: "blur" } ], }   }}在methods中写规则,示例代码如下:data() { return { formData: { haggleNumber: "", // 砍价人数 }, rules: { haggleNumber: [ { required: true, validator: this.bargainMoney, trigger: "blur" } ] } }},methods: { // 自定义校验规则 bargainMoney(rule, value, callback){ // rule 对应使用bargainMoney自定义验证的 对象 // value 对应使用bargainMoney自定义验证的 数值 // callback 回调函数 const r = /+?[1-9][0-9]*$/; // 正整数 if (value == null || String(value).trim() === "") { return callback(new Error("不能为空")); } else if (!r.test(value)) { return callback(new Error("请输入正整数")); }else { return callback(); } }}

二者的区别在于:

在data 中不需要通过 return 回调函数,而在 methods 中则需要。在methods中写的验证规则 ,需要在rules中配置规则时通过 this获取。四、动态增减表单项

  除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则。   示例代码如下:

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> </el-form-item></el-form><script> export default { data() { return { dynamicValidateForm: { domains: [{ value: '' }], email: '' } }; }, 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(); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: '', key: Date.now() }); } } }</script>
本文链接地址:https://www.jiuchutong.com/zhishi/300846.html 转载请保留说明!

上一篇:2023年美赛春季赛 赛题浅析(2023年美赛春季赛成绩查询)

下一篇:什么是 Web 3.0?(新手入门指南)(什么是男人无力的行为)

  • 向个人提供居住证明
  • 哪些资产损失向银行贷款
  • 进口设备退税如何账务处理?
  • 调研费用怎么写
  • 工资薪金总额包括年终奖吗
  • 餐饮加盟公司怎么经营
  • 公司与公司之间合作协议
  • 技术服务行业分析
  • 劳务建筑公司一年可以赚多少
  • 施工单位的项目
  • 广告服务差额征税
  • 长期待摊会计处理
  • 税收滞纳金可以税前扣除吗
  • 鸿蒙系统垃圾清理
  • 材料没入库的会计分录
  • 会计档案的保管期限是从什么算起
  • xp系统鼠标右键不能用怎么办
  • php数组函数输出《咏雪》里有多少"片"字
  • 飞机电子普通发票6%税率可以抵扣吗
  • PHP+Mysql+jQuery实现发布微博程序 php篇
  • wcu.exe是什么
  • 消防器材怎么做?
  • php配置文件的名字是
  • 员工辞退补偿金需要交个税吗
  • 企业亏损注销税务会不会来查账
  • 营业外收入账户性质
  • 税务行政罚款会罚多少
  • 城市基础设施配套费计入什么科目
  • php中的常用魔术有哪些
  • vue聊天系统
  • 微软和梅赛德斯奔驰宣布合作
  • php上传照片
  • php微信公众号开源框架
  • echarts 官网
  • 补收入账是什么意思
  • 对公账户的备用金取现额度
  • 购买监控器计入什么科目
  • 计提坏账准备和确认坏账损失
  • sqlserver数据库备份
  • 个人所得税的不同税率
  • 其他应收款借方表示增加吗
  • 用于餐厅的不锈钢餐具
  • 现金流量表的编制公式 计算公式
  • 公司进行债券投资的缺点
  • 房东减免部分房租
  • 本月损益类未结转为零的一级科目怎么操作
  • 经营范围中没有这个项目开票后果
  • 记账凭证结算方式没出来
  • 应付工资比计提工资高
  • 退差价后退货
  • 二手车公司销售二手车增值税怎么算
  • 资产减值损失属于费用类吗
  • 某劳务派遣公司与某传媒公司签订
  • 新公司成立第一次会议内容
  • 通行费电子发票抵扣填写到附表二的第几栏次
  • 企业购买黄金如何入账
  • 存储过程的定义及调用方法
  • centos6.9 yum
  • ug实体命令怎么使用
  • win8系统自带截图
  • 如何设置windows启动密码
  • linux ./执行
  • 在mac下如何安装软件
  • dghm.exe是什么程序
  • macos终端命令
  • win10 rs4
  • node linux安装
  • 在动画制作中一般默认帧数选择为
  • python中将
  • disk指令
  • vue分页组件page
  • 安卓app性能测试
  • 基于mvc的项目实例
  • HAL code debug
  • js鼠标点击图片就消失
  • 河南电子税务局残保金怎么申报
  • 发票测试纸在哪里打印
  • 青椒课堂怎么激活登录
  • 汉口市中心
  • 增值税专用发票和普通发票的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设