element-ui表单校验
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-form :model="form" ref="form" :rules="rules" >
<el-form-item label="编码" :label-width="formLabelWidth">
<el-input v-model="form.codenum" :disabled="isEdit" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input v-model="form.name" :disabled="isEdit" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="分数"
prop="fenshu"
:label-width="formLabelWidth"
>
<el-input v-model="form.fenshu" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="评价" :label-width="formLabelWidth">
<el-input type="textarea" v-model="form.detail" autocomplete="off"></el-input>
</el-form-item>
</el-form>
data:function(){
let checkFenshu = function(rule,value,callback){
if(!value) {
return new Error('必填信息')
}else {
if(isNaN(value)) {
console.log(value)
callback(new Error('请输入数字值'))
}else{
if(value < 0) {
callback(new Error('不能小于0'))
}else if(value > 100){
callback(new Error('不能大于100'))
}else {
callback()
}
}
}
}
return {
rules:{
fenshu:[
{ required: true, message: '分数不能为空'},
{validator:checkFenshu,trigger:'blur'}
]
}
}
},
或者这样
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="form.email"></el-input>
</el-form-item>
数字类型的验证需要在
v-model
处加上.number
的修饰符,这是Vue
自身提供的用于将绑定值转化为number
类型的修饰符。
<el-form-item label="分数" prop="fenshu">
<el-input v-model.number="form.fenshu" ></el-input>
</el-form-item>
并添加了第二条规则:
rules: {
fenshu: [{
required: true,
message: '请输入分数',
trigger: 'blur'
},
{
type: 'number',
message: '分数必须为数字',
trigger: 'blur'
},
{
validator: validateAcquaintance, // 自定义验证
trigger: 'blur'
}]
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献10条内容
所有评论(0)