elementui form表单自定义校验规则（包含含有小数的数字以及正整数的正则）

有蝉

已于 2022-03-17 17:28:56 修改

阅读量1.5w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： vue+element-ui 文章标签： elementUI VUE

于 2019-05-06 13:40:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37899792/article/details/89880923

vue+element-ui 专栏收录该内容

17 篇文章

订阅专栏

博客涉及ElementUI和VUE相关内容，但具体信息缺失。ElementUI是前端组件库，VUE是前端框架，二者结合可高效开发前端项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>

       <el-form :model="sub1Form" :rules="sub1Rules" ref="sub1Form" label-width="100px" class="demo-ruleForm">
              <el-form-item label="发料单数" prop="fds">
                   <el-input v-model="sub1Form.fds" size="mini"></el-input>
               </el-form-item>
               <el-form-item label="今日" prop="name">
                    <el-input v-model="sub1Form.name" size="mini"></el-input>
               </el-form-item>
            </el-form>
    </div>
</template>
<script>
export default {
    data(){
        var valiNumberPass1 = (rule, value, callback) => {//包含小数的数字
            let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
            if (value === '') {
                callback(new Error('请输入内容'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入数字'));
            } else {
                callback();
            }
        };
        var valiNumberPass2 = (rule, value, callback) => {//正整数
            let reg = /^[+]{0,1}(\d+)$/g;
            if (value === '') {
                callback(new Error('请输入内容'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入0及0以上的整数'));
            } else {
                callback();
            }
        };
        return {      
            sub1Form:{
                fds:'',
                name:''
            },
            sub1Rules: {
                fds:[
                    { required: true, validator:valiNumberPass2, trigger: "blur" }
                ],
                name: [
                   { required: true, validator:valiNumberPass1, trigger: "blur" }
                ],
            },
            
        }
    },
    methods:{
       
    }
}
</script>