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)去影响模 ...
随机推荐
- Salsa20算法介绍
简介 Salsa20是一种流式对称加密算法,类似于Chacha20,算法性能相比AES能够快3倍以上. Salsa20算法通过将32 Byte的key和8 Byte的随机数nonce扩展为2^70 B ...
- 本地Markdown上传图片
本地Markdown上传图片 1.上传本地markdown文件到博客园 使用工具pycnblog 下载:https://github.com/dongfanger/PyCnblog 查看READ ME ...
- OOP第二章博客
OO第二次博客作业 (1)作业分析 三次作业在处理多线程的协同配合时都是使用将同步放在自己写的"线程安全类"(经测试有些许漏洞_,但是不影响结果就是了): 我个人倾向于把wait( ...
- ACM基础板子
新生赛以后就正式成为一名acmer啦 ~虽然没有打过比赛呜呜呜 要好好学算法,拿一个牌牌嘛~ 这里就记录算法学习情况,也怕自己偷懒,学一个就记录,看看长时间拖更就是在摸鱼,摸鱼和鸽子都是本质 ,加油! ...
- Iterable 和 Iterator
可以被for循环输出的为iterable (可迭代对象) 可以被next()调用并不断返回下一个数据的对象为iterator迭代器(python一切皆对象) 数据流,无法知晓其终点,只能推过next不 ...
- C#类中方法的执行顺序
有些中级开发小伙伴还是搞不太明白在继承父类以及不同场景实例化的情况下,父类和子类的各种方法的执行顺序到底是什么,下面通过场景的举例来重新认识下方法的执行顺序: (下面内容涉及到了C#中的继承,构造函数 ...
- tigervnc报错
tigervnc报错
- 利用IOzone进行存储性能测试
利用IOzone进行存储性能测试 命令:1.iozone -s 10G -r 4k -i 0(0代表顺序写) -w(代表文件不删除) -+n(不测重读重写) -Rb(以某种格式生成测试文件) /t ...
- 046.Python协程
协程 1 生成器 初始化生成器函数 返回生成器对象,简称生成器 def gen(): for i in range(10): #yield 返回便能够保留状态 yield i mygen = gen( ...
- 042.Python进程队列介绍
进程队列介绍 1 基本语法及过程 先进先出,后进后出,q = Queue() 过程 (1)把数据放到q队列中 put (2)把书局从队列中拿出来 get from multiprocessing i ...