js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生
上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验:
动态表单校验大致分为三种情况:
1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里有“增加”功能,增加一行,给新生成的表单组件添加校验规则。
2. 第二类就是组件固定,但是校验规则会随着其他条件的变化而变化,例如:基本的最常见的例子是确认密码的校验,判断第二次输入的密码与第一次输入是否一致。
3. 最后,比较复杂的就是以上两类情况的混合情况,动态生成的表单,且校验规则也是动态变化的。
接下来还是用最直观的举例子来解释用法:
这里使用了element自带的rules,其他框架同理,也可以自己绑定方法,原生的用blur,focus等也可以
一:固定校验规则+组件动态生成
要实现的效果:点击第一行的新增生成下面的表格,表格各自校验
实现方法代码举例:
html :(放到表格里的组件,和表单同理)
1 <el-table-column align="center" label="金额标准" prop="level">
2 <template slot-scope="scope">
3 <span v-if="scope.row.edit">{{ scope.row.level}}</span>
4 <el-form-item v-show="!scope.row.edit" :prop="'list.'+scope.$index+'.level'" :rules="rules.level">
5 <el-input v-model="scope.row.level" autofocus placeholder="请输入金额标准"></el-input>
6 </el-form-item>
7 </template>
8 </el-table-column>
js :(校验规则以及触发方式定义)
1 data() {
2 return {
3 rules:{
4 level: [
5 {required: true, message: '请输入金额标准', trigger: ['blur', 'change']},
6 { validator:function(rule,value,callback){
7 if(/^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(Number(value)) == false||Number(value)>10000){
8 callback(new Error("请输入数字,可保留两位小数,最大不超过10000"));
9 }else if(/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(Number(value)) == false){
10 callback(new Error("请输入数字,可保留两位小数,最大不超过10000"));
11 }else{
12 callback();
13 }
14 }, trigger:['blur', 'change']
15 }
16 ],
17 }
18 }
19 }
js:(实现方式)
1 formValidate(formName){
2 this.$refs[formName].validate((valid) => {
3 if(valid) {
4 this.validateForm=true;
5 }else{
6 this.$message.warning("请确认输入信息无误!");
7 this.validateForm=false;
8 }
9 });
10 return this.validateForm;
11 }
调用formValidate方法即可。
二:固定组件+动态校验规则
要实现的效果:(element官方举例)
实现方法代码举例:
html:
1 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
2 <el-form-item label="密码" prop="pass">
3 <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
4 </el-form-item>
5 <el-form-item label="确认密码" prop="checkPass">
6 <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
7 </el-form-item>
8 </el-form>
js:(校验规则可以定义到return之前,也可以直接放到rules里)
1 data() {
2 var validatePass = (rule, value, callback) => {
3 if (value === '') {
4 callback(new Error('请输入密码'));
5 } else {
6 if (this.ruleForm.checkPass !== '') {
7 this.$refs.ruleForm.validateField('checkPass');
8 }
9 callback();
10 }
11 };
12 var validatePass2 = (rule, value, callback) => {
13 if (value === '') {
14 callback(new Error('请再次输入密码'));
15 } else if (value !== this.ruleForm.pass) {
16 callback(new Error('两次输入密码不一致!'));
17 } else {
18 callback();
19 }
20 };
21 return {
22 ruleForm: {
23 pass: '',
24 checkPass: ''
25 },
26 rules: {
27 pass: [
28 { validator: validatePass, trigger: 'blur' }
29 ],
30 checkPass: [
31 { validator: validatePass2, trigger: 'blur' }
32 ]
33 }
34 };
三:动态生成组件+动态校验规则
要实现的效果:三个组件分别纵向对比校验,各组件个数不固定,为动态生成,各自校验规则也相互影响,人数2依附于人数1的输入值。
实现方法代码举例:
html:(绑定prop以及rules)
1 <tr>
2 <td>
3 <div>
4 <div><label class="col-sm-4 control-label addbefore">天数</label>
5 </div>
6 </div>
7 </td>
8 <td>
9 <div>
10 <template v-for="(item, index) in form.list1">
11 <el-form-item
12 :key="item.key"
13 :id="item.key"
14 :name="item.key"
15 style="float: left;"
16 :prop="'list1.' + index +'.a_value'"
17 :rules="rules.a_value1">
18 <el-input v-model.number="item.a_value"></el-input>
19 <span>天</span>
20 </el-form-item>
21 </template>
22 </div>
23 </td>
24 </tr>
25 <tr>
26 <td>
27 <div>
28 <label>人数1</label>
29 </div>
30 </td>
31 <td>
32 <div>
33 <template v-for="(domain, index) in form.list2">
34 <el-form-item
35 :key="domain.key"
36 :id="domain.key"
37 :name="domain.value"
38 style="float: left;"
39 :prop="'list2.' + index +'.b_value'"
40 :rules="rules.b_value">
41 <el-input v-model.number="domain.b_value"></el-input>
42 <span>人</span>
43 </el-form-item>
44 </template>
45 </div>
46 </td>
47 </tr>
48 <tr>
49 <td>
50 <div>
51 <label>人数2</label>
55 </div>
56 </td>
57 <td>
58 <div>
59 <template v-for="(domain, index) in form.list3">
60 <el-form-item
61 :key="domain.key"
62 :id="domain.key"
63 :name="domain.value"
64 style="float: left;"
65 :prop="'list3.' + index +'.c_value'"
66 :rules="rules.c_value">
67 <el-input v-model.number="domain.c_value"></el-input>
68 <span>人</span>
69 </el-form-item>
70 </template>
71 </div>
72 </td>
73 </tr>
js :(数据及校验规则定义)
1 data(){
2 var me=this
3 return {
4 form:{
5 list1:[],
6 list2:[],
7 list3:[]
8 }
9 rlues:{
10 a_value: [
11 { required: true, message: '请输入', trigger: ['blur', 'change'] },
12 { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
13 {
14 validator: (rule, value, callback) => {
15 if (value > 200) {
16 callback(new Error('天数应小于200'))
17 } else {
18 callback()
19 }
20 },
21 trigger: ['blur', 'change']
22 }
23 ],
24 b_value:[
25 { required: true, message: '请输入', trigger: ['blur', 'change'] },
26 { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
27 {
28 validator: (rule, value, callback) => {
29 if (value > 100) {
30 callback(new Error('人数1应小于100'))
31 } else {
32 callback()
33 }
34 },
35 trigger: ['blur', 'change']
36 }
37 ],
38 c_value:[
39 { required: true, message: '请输入', trigger: ['blur', 'change'] },
40 { type: 'number', message: '请输入数字', trigger: ['blur', 'change']},
41 {
42 validator: (rule, value, callback) => {
43 let index=Number(rule.field.substr(6, 1))
44 let sc=(me.form.list2[index].b_value)*0.1
45 if (value > sc) {
46 callback(new Error('人数2不超过人数1的10%'))
47 } else {
48 callback()
49 }
50 },
51 trigger: ['blur', 'change']
52 }
53 ]
54 }
55 }
56 }
js:(实现方式)
1 formValidate(formName){
2 this.$refs[formName].validate((valid) => {
3 if(valid) {
4 this.validateForm=true;
5 }else{
6 this.$message.warning("请确认输入信息无误!");
7 this.validateForm=false;
8 }
9 });
10 return this.validateForm;
11 }
总结:
这三种情况其实基本原理是相同的,即是在变化的元素以及变化的标准怎么比较,首先来说确定两点,一是要绑定prop,动态双向绑定,相当于生成组件是时给该元素生成一个标识,一般来说动态绑定写法如下:
:prop="'list.' + index +'.value'"
或者写成
:prop="'list.'+scope.$index+'.value'"
其次,是绑定一个规则:
:rules="rules.value"
然后就是具体校验,可以写到html里,也可以写到js里,一般来说有校验方法的写到js里,需要注意的是 validator: (rule, value, callback) => { },这个回调方法里的三个参数:
第一个参数 rule,为绑定元素的prop,主要用来取到需要进行比较的值,即规则;
第二个参数 value,为此时输入的内容,和规则作比较,是否符合;
第三个参数 callback,为校验完的回调函数,校验成功或失败的提示在callback函数中执行;
以上为动态校验总结。
这两篇内容详细记录了我遇到的,以及所有能想到的前端校验的情况的相关内容,欢迎补充。
js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生的更多相关文章
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 用JS动态创建登录表单,报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js动态的往表格中加入表单元素
效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...
- js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- vue的表单的简单介绍 input radio checkbox等表单特性
在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...
随机推荐
- VS2010编写32位和64位dll环境配置,以及判断dll是多少位
前言 最近在编写dll注入程序的时候,因为想注入到系统进程,结果发现总是注入失败.自闭了好长一会发现我忘记了我的系统是64位的,系统进程也是64位的,而我编写的待注入的DLL是32位了,所以才导致失败 ...
- java面试一日一题:java中一个对象实例的结构是什么样子的
问题:请讲下在java程序运行时一个对象实例的数据结构是什么样子的 分析:该问题主要考察对java中对象的理解,在程序运行过程中一个对象实例是以什么样的形式存在的 回答要点: 主要从以下几点去考虑, ...
- shell脚本常用语法详解
逻辑控制 if 语法:注意空格 a=1b=2if [ $a == $b ]then echo "a==b"elif [ $a -gt $b ]then echo &qu ...
- [bug] Navicat 连 虚拟机MySQL
参考 https://www.cnblogs.com/brankoliu/p/10845491.html https://blog.csdn.net/qq_40087740/article/detai ...
- 用nvm的方式安装node
一.nvm简介 Node Version Manager(Node版本管理工具)由于以后的开发工作可能会在多个Node版本中测试,而且Node的版本也比较多,所以需要这么款工具来管理. nvm的安 ...
- 【转载】CentOS下查看电脑硬件设备属性命令
CentOS下查看电脑硬件设备属性命令2018年09月13日 17:48:31 乔烨 阅读数 510如何在linux下查看电脑硬件设备属性 # uname -a # 查看内核/操作系统/CPU信息 # ...
- UltraISO制作启动盘安装CentOS7
UltraISO制作启动盘安装CentOS7 发表于 2020-03-10 | 分类于 DevOps | 没有评论 简单几个步骤即可完成启动盘的制作,非常便利 准备工具 准备8G优盘(启动盘制 ...
- sed -i 's/Search_String/Replacement_String/g' Input_File sed详细手册
本文列出的十五个例子可以帮助你掌握 sed 命令.如果要使用 sed 命令删除文件中的行,去下面的文章.注意:由于这是一篇演示文章,我们使用不带 -i 选项的 sed 命令,该选项会在 Linux 终 ...
- 搭建LAMP环境部署discuz论坛
!!!什么是LAMP: LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写: Linux,操作系统 Apache,网页服务器 MariaDB或MySQL,数据库管理系统(或者 ...
- 大文件查找 du -ahx . | sort -rh | head -10
# cd /root@test-W330-C30:/# du -ahx . | sort -rh | head -58.2G .5.6G ./usr3.3G ./usr/share1.9G ./usr ...