当前位置:网站首页>Common verification rules of form components -1 (continuously updating ~)
Common verification rules of form components -1 (continuously updating ~)
2022-07-04 20:36:00 【51CTO】
Preface
I feel more and more deeply recently , It's about sharing often , Share your own pitfalls , Share your solutions , Share your experiences , It's very necessary . because , My first reaction when I encounter a problem is to see how others solve it , Someone must have the same idea , At this time, we all need to share very generously . therefore , In the future, I will try to summarize and share regularly , It's convenient for others and for yourself ~
Reference link
https://element.eleme.io/#/zh-CN/component/form
https://github.com/yiminghe/async-validator
Introduction to form verification
Purpose of use
On the premise of preventing users from making mistakes , Let users find and correct errors as early as possible .
Easy to use
Form Component provides the function of form validation , Just go through rules
Property to pass in the validation rules of the contract , And will Form-Item Of prop
Property is set to the field name to be verified .
< el - form : model = "ruleForm" : rules = "rules" ref = "ruleForm" label - width = "100px" class = "demo-ruleForm" >
< el - form - item label = " The name of the event " prop = "name" >
< el - input v - model = "ruleForm.name" > < /el-input>
< /el-form-item>
< el - form - item >
< el - button type = "primary" @ click = "submitForm('ruleForm')" > Create... Now < /el-button>
< el - button @ click = "resetForm('ruleForm')" > Reset < /el-button>
< /el-form-item>
< /el-form>
< script >
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: ' Please enter the activity name ', trigger: 'blur' },
{ min: 3, max: 5, message: ' The length is in 3 To 5 Characters ', 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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
Common field
required
Is it required , Used to verify whether the field content is empty ;
type
data type , Similar data format verification , The default is string, Common types are number
,boolean
,integer
,float
,array
,date
,email
etc. ;
pattern
Only when the field value matches the regular expression can it pass the validation ;
min
and max
about string And arrays ,min and max Represents the minimum and maximum length ; For numbers number Come on , Indicates the size of the limit value ;
trigger
Conditions that trigger validation ;
validator
You can customize the validation function for the specified field :function(rule, value, callback);
边栏推荐
- Aiming at the "amnesia" of deep learning, scientists proposed that based on similarity weighted interleaved learning, they can board PNAS
- Win11共享文件打不开怎么办?Win11共享文件打不开的解决方法
- 最长的可整合子数组的长度
- 九齐单片机NY8B062D单按键控制4种LED状态
- QT writing the Internet of things management platform 38- multiple database support
- 关于联邦学习和激励的相关概念(1)
- MySQL中的日期时间类型与格式化方式
- Oracle database, numbers Force 2 decimal places to display-Alibaba Cloud
- C server log module
- Delete the characters with the least number of occurrences in the string [JS, map sorting, regular]
猜你喜欢
精选综述 | 用于白内障分级/分类的机器学习技术
c# . Net MVC uses Baidu ueditor rich text box to upload files (pictures, videos, etc.)
什么叫内卷?
同事的接口文档我每次看着就头大,毛病多多。。。
On communication bus arbitration mechanism and network flow control from the perspective of real-time application
NLP、视觉、芯片...AI重点方向发展几何?青源会展望报告发布[附下载]
实战模拟│JWT 登录认证
Win11系统wifi总掉线怎么办?Win11系统wifi总掉线的解决方法
【ISMB2022教程】图表示学习的精准医疗,哈佛大学Marinka Zitnik主讲,附87页ppt
NLP, vision, chip What is the development direction of AI? Release of the outlook report of Qingyuan Association [download attached]
随机推荐
Prometheus installation
NLP、视觉、芯片...AI重点方向发展几何?青源会展望报告发布[附下载]
Understand the reading, writing and creation of files in go language
更强的 JsonPath 兼容性及性能测试之2022版(Snack3,Fastjson2,jayway.jsonpath)
公司要上监控,Zabbix 和 Prometheus 怎么选?这么选准没错!
凌云出海记 | 沐融科技&华为云:打造非洲金融SaaS解决方案样板
Thinking on demand development
Pointnext: review pointnet through improved model training and scaling strategies++
How is the entered query SQL statement executed?
凌云出海记 | 文华在线&华为云:打造非洲智慧教学新方案
Application practice | Shuhai supply chain construction of data center based on Apache Doris
Win11系统wifi总掉线怎么办?Win11系统wifi总掉线的解决方法
什么是区块哈希竞猜游戏系统开发?哈希竞猜游戏系统开发(案例成熟)
水晶光电:长安深蓝SL03的AR-HUD产品由公司供应
Practice examples to understand JS strong cache negotiation cache
Actual combat simulation │ JWT login authentication
Hash哈希竞猜游戏系统开发如何开发丨哈希竞猜游戏系统开发(多套案例)
原来这才是 BGP 协议
On communication bus arbitration mechanism and network flow control from the perspective of real-time application
Taishan Office Technology Lecture: about the order of background (shading and highlighting)