<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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐