Vue+element ui -- 自定义表单验证：金额

        在实际项目中，表单验证可以说非常普遍，尤其是财务系统项目和商城项目，涉及到金额的输入框更是很多。那么验证用户输入信息的争取与否，就变得至关重要，不单要做到准确还要照顾用户的输入习惯以及舒适度；

        这边笔记记录了原来我在项目中进行 “ 金额 ” 方面的自定义校验的方法，这项目是使用的vue开发，采用element ui 的前端UI框架；

        直接上代码：

<template>
    <div class="addLicense">
        <!-- 内容 -->
        <div class="content">
                <el-form ref="formAdd" :model="formAdd" label-width="140px" :rules="licenseRules">
                <div class="main-content">

                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="formAdd.projectName" placeholder="请输入项目名称"></el-input>
                </el-form-item>

                <el-form-item label="注册资本" prop="registeredCapital">
                    <el-input v-model="formAdd.registeredCapital" placeholder="请输入注册资本" style="width: 40%;"><template slot="append">万元</template></el-input>
                </el-form-item>
                </div>
                <div style="text-align:center;">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('formAdd')">立即创建</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
                </div>
                </el-form>
        </div>
    </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
export default {
    name:"addLicense",
    data(){
        var moneyReg = (rule,value,callback) => {
            if(value.length > 10){
                callback(new Error('长度在 0 到 10 个字符'));
            }else{
                setTimeout(() => {
                  if (!/^\d+[.]?\d{0,2}$/.test(value) && value){
                    callback(new Error('请输入正整数或小数保留两位小数'));
                  }else{
                    callback()
                  }
                }, 500);
            }

        };
        return{
            formAdd: {
                projectName:'',
                registeredCapital:'',
            },
            licenseRules:{
                projectName:[{required:true, message: "请输入项目名称", trigger: 'blur'},{ min: 1, max: 60, message: '长度在 60 个字符内', trigger: 'blur' }],
                registeredCapital:[{ validator: moneyReg, trigger: 'blur' }]
            },
        }
    },
    created() {
    },
    methods:{
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if(valid){
                    // valid == true 时执这段代码段。表示表单验证全部通过。
                }else {
                    this.$message.error('请准确填写必填项信息！');
                    return false;
                }
            });
        },

        close(){
            this.$emit('createPageClose');
        },
    }
}
</script>

<style scoped>

</style>

逻辑：

        自定义校验规则 的实现方法在 element ui 官网 中也做了较为详细的讲解，各位小伙伴也可以去官网了解更多的信息。这里，总结来说重要的有两点：1，validator引入定义的规则不能省略；2，自定义规则的方法中，返回函数callback();是返回的定义结果，绝对要保证每一种结果都由callback（）返回。

该功能就记录到这里，希望可以为大家省一些功夫，对大家有用。

如果各位大佬们觉得有点价值，麻烦点赞评论一下，谢谢。

拜了个拜！迪迦。。。