文章目录

form
- rules 绑定
- 对象校验
- 数组校验
- validate 方法
- validateField方法
- form中的v-if/v-show
- rules 中的关键字说明
- - Type
  - required
  - pattern
  - min/max
  - Len
  - enum
  - whitespace
  - transform
  - fields
  - message
  - validator

form

rules 绑定

绑定到el-form

<template><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="age" prop="age"><el-input v-model.number="form.age" type="age"></el-input></el-form-item></el-form>
</template><script lang="ts">
const checkAge = (rule, value, callback) => {console.warn('checkAge');if (value < 18) {callback(new Error('Age must be greater than 18'));} else {callback();}
};
export default {data() {// const checkAge = (rule, value, callback) => {//     console.warn('checkAge');//     if (value < 18) {//         callback(new Error('Age must be greater than 18'));//     } else {//         callback();//     }// };return {form: {age: ''},rules: {age: [{ required: true, message: 'age is required' },{ type: 'number', message: 'age must be a number' },{ validator: checkAge, trigger: ['blur', 'change'] }]}};}
};
</script>

checkAge 可以写到data里面或者export default 外面

缺点：不能与其他data中的值关联校验。

绑定到el-form-item
```
<template><el-form ref="form" :model="form" label-width="100px"><el-form-itemlabel="name"prop="name":rules="[{ required: true, message: 'name is required' },{ type: 'string', message: 'name must be a string' },{ validator: checkName, trigger: ['blur'] }]"><el-input v-model="form.name"></el-input></el-form-item></el-form>
</template><script lang="ts">
export default {data() {return {form: {name: '',age: ''},realName: 'zhangsan'};},methods: {checkName(rule, value, callback) {console.warn('checkName');if (value.length < 6 || value.length > 10) {callback(new Error('name 长度6～10'));} else if (!value.startsWith(this.realName)) {callback(new Error(`必须以 ${this.realName} 开头`));} else {callback();}}}
};
</script>
```
校验方法需写到methods中，

el-form 表单的校验相关推荐
1. Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
  本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
2. element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
  前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
3. form表单提交前进行ajax或js验证，校验不通过不提交
  在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
4. 深究AngularJS——校验（非form表单）
  为什么是非form表单?因为基本上都是通$http服务异步发送与接收数据,没有form表单个一样可以.更何况,form表单的提交校验在哪里都可以搜索得到,我这个是通过自己总结出来滴. <!DOC ...
5. form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传
  form表单校验复杂系列- form表单内插入独立的数据表格,动态校验数据表格内每行的文件上传前言公司项目有个模块需要优化form表单内,插入独立的数据表格,表格内容是文件上传,需要利用外部表单提 ...
6. uniapp uview 框架的form表单，输入校验手机号、校验微信号
  效果代码实现 <u-form :model="form" ref="form"><u-form-item label-width=" ...
7. form表单校验插件(含详细注解)
  说到表单校验,第一个想起来的肯定是jquery的validate.js,该插件的确是很强大,用在项目中也很健壮,但是为什么我选择重新自己封装一个插件呢? 为什么要自己封装表单验证插件: 1.因为项目中 ...
8. vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】
  vue3 ant design vue项目实战--Form表单[v-model双向绑定数据实现form表单数据的提交] 上期文章回顾[UI界面渲染] 场景复现(源代码附在文章最后) 实现需求 1.表单 ...
9. elementui form表单校验不通过问题
  项目场景: Form 表单绑定rulue表单校验问题描述提示:这里描述项目中遇到的问题: 例如:表单明明有数据,但校验一直不通过,我检查了rules绑定的字段跟v-mode的字段是一直的,类型也是 ...
10. form表单输入正则校验
  form表单输入正则校验 <el-formslot="dialog-content"class="dialogContent":model="u ...
最新文章
热门文章

el-form 表单的校验

文章目录

form

rules 绑定

el-form 表单的校验相关推荐

最新文章

热门文章